theme.js function Theme() { var that=this this.style=null init() function init() { that.style=document.createElement('style') that.style.type = 'text/css'; //这里必须显示设置style元素的type属性为text/css,否则在ie中不起作用 that.style.id = 'theme' that.changeTheme('red') var head=(document.head || document.getElementsByTagName('head')[0]) head.appendChild(that.style) } } Theme.prototype.changeTheme = function (color) { var that = this var cssText = ".theme-bg{background:" + color + "} .theme-color{color:" + color + "};}"; if (that.style.styleSheet) { //IE var func = function () { try { //防止IE中stylesheet数量超过限制而发生错误 that.style.styleSheet.cssText = cssText; } catch (e) { } } //如果当前styleSheet还不能用,则放到异步中则行 if (that.style.styleSheet.disabled) { setTimeout(func, 10); } else { func(); } } else { //w3c that.style.innerHTML = cssText; } }
html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="theme.js"></script> </head> <body> <div class="theme-bg">我是主题背景</div> <div class="theme-color">我是主题色</div> <input id="ipt" type="text"> <button οnclick="changeThemes()">修改</button> </body> <script> var theme1=new Theme() function changeThemes() { var val=document.getElementById('ipt').value theme1.changeTheme(val) } </script> </html>