如何通过脚本动态添加CSS样式实现个性化网页定制？

本文共计242个文字，预计阅读时间需要1分钟。

javascript内链样式添加函数：addCssByInline(cssId) { var doc=document; var link=doc.createElement('style'); link.type='text/css'; link.rel='stylesheet'; if (link.styleSheet) { // IE支持link.styleSheet.cssText }}

内链样式

addCssByInline: function(cssId) { var doc = document; var link = doc.createElement('style'); link.setAttribute('type', 'text/css'); link.setAttribute('rel', 'stylesheet'); if (link.stylesheet) { // IE支持 link.stylesheet.cssText = localStorage.getItem(cssId); } else { // w3c var cssText = doc.createTextNode(localStorage.getItem(cssId)); link.appendChild(cssText); } var heads = doc.getElementsByTagName('head'); if (heads.length) { heads[0].appendChild(link); } else { doc.documentElement.appendChild(link); } } 外链样式

addCssByLink: function(cssId, url) { var doc = document; var link = doc.createElement('link'); link.setAttribute('type', 'text/css'); link.setAttribute('rel', 'stylesheet'); link.setAttribute('href', url); var heads = doc.getElementsByTagName('head'); if (heads.length) { heads[0].appendChild(link); } else { doc.documentElement.appendChild(link); } }, 内链脚本

// 内联方式添加javascript addJavascriptByInline: function(scriptId) { var script = document.createElement('script'); script.setAttribute('type', 'text/javascript'); script.id = scriptId; var bodys = document.getElementsByTagName('body'); if (bodys.lenght) { bodys[0].appendChild(script); } else { document.documentElement.appendChild(script); } script.innerHTML = localStorage.getItem(scriptId); }, 外链脚本

// 外链方式添加javascript addJavascriptByLink: function(scriptId, url) { var script = document.createElement('script'); script.setAttribute('type', 'text/javascript'); script.setAttribute('src', url); script.id = scriptId; var bodys = document.getElementsByTagName('body'); if (bodys.length) { bodys[0].appendChild(script); } else { document.documentElement.appendChild(script); } },