2023年6月21日发(作者：)
动态添加css 好久没写⽂章了今天关于动态添加css⽂件写⼀点想法1. 第⼀种添加⽅式：mentById("elementId").ound="#ff0000";这种⽅式采⽤内联是插⼊css.优先级⾼。容易引起页⾯回流性能不好 也不能进⾏多个样式的添加2. 第⼆种⽅式： mentsByTagName("a")[0].t = "background:#ff0000;border:1px #dfdfdf solid;";
这种⽅式 相⽐第⼀种优点是可以⼀次进⾏多个样式的设定，但仍是内联式，引起页⾯回流，多次插⼊引起性能上的消耗。3. 第三种是：直接在style标签中写，这种⽅法要考虑不同浏览器的兼容性问题。（声明：下⾯代码引⽤”司徒正美“的⼀段代码） var addSheet = function () { var doc, cssCode; if ( == 1) { doc = document; cssCode = arguments[0] } else if ( == 2) { doc = arguments[0]; cssCode = arguments[1]; } else { alert("addSheet函数最多接受两个参数!"); } if (! +"v1") {//增加⾃动转换透明度功能，⽤户只需输⼊W3C的透明样式，它会⾃动转换成IE的透明滤镜
var t = (/opacity:(d?.d+);/); if (t != null) { cssCode = e(t[0], "filter:alpha(opacity=" + parseFloat(t[1]) * 100 + ")") } } cssCode = cssCode + "n"; //增加末尾的换⾏符，⽅便在firebug下的查看。
var headElement = mentsByTagName("head")[0]; var styleElements = mentsByTagName("style"); if ( == 0) {//如果不存在style元素则创建
if (StyleSheet) { //ie
StyleSheet(); } else { var tempStyleElement = Element('style'); //w3c
ribute("type", "text/css"); Child(tempStyleElement); } } var styleElement = styleElements[0]; var media = ribute("media"); if (media != null && !/screen/.test(rCase())) { ribute("media", "screen"); } if (heet) { //ie
t += cssCode; } else if (ObjectFor) { TML += cssCode; //⽕狐⽀持直接innerHTML添加样式表字串
} else { Child(TextNode(cssCode)) } }
4.动态加载css⽂件，这个就简单了 function addStyle(stylePath) { var container = mentsByTagName("head")[0]; var addStyle = Element("link"); = "stylesheet"; = "text/css"; = "screen"; = stylePath; Child(addStyle); } addStyle('css/');
2023年6月21日发(作者：)
动态添加css 好久没写⽂章了今天关于动态添加css⽂件写⼀点想法1. 第⼀种添加⽅式：mentById("elementId").ound="#ff0000";这种⽅式采⽤内联是插⼊css.优先级⾼。容易引起页⾯回流性能不好 也不能进⾏多个样式的添加2. 第⼆种⽅式： mentsByTagName("a")[0].t = "background:#ff0000;border:1px #dfdfdf solid;";
这种⽅式 相⽐第⼀种优点是可以⼀次进⾏多个样式的设定，但仍是内联式，引起页⾯回流，多次插⼊引起性能上的消耗。3. 第三种是：直接在style标签中写，这种⽅法要考虑不同浏览器的兼容性问题。（声明：下⾯代码引⽤”司徒正美“的⼀段代码） var addSheet = function () { var doc, cssCode; if ( == 1) { doc = document; cssCode = arguments[0] } else if ( == 2) { doc = arguments[0]; cssCode = arguments[1]; } else { alert("addSheet函数最多接受两个参数!"); } if (! +"v1") {//增加⾃动转换透明度功能，⽤户只需输⼊W3C的透明样式，它会⾃动转换成IE的透明滤镜
var t = (/opacity:(d?.d+);/); if (t != null) { cssCode = e(t[0], "filter:alpha(opacity=" + parseFloat(t[1]) * 100 + ")") } } cssCode = cssCode + "n"; //增加末尾的换⾏符，⽅便在firebug下的查看。
var headElement = mentsByTagName("head")[0]; var styleElements = mentsByTagName("style"); if ( == 0) {//如果不存在style元素则创建
if (StyleSheet) { //ie
StyleSheet(); } else { var tempStyleElement = Element('style'); //w3c
ribute("type", "text/css"); Child(tempStyleElement); } } var styleElement = styleElements[0]; var media = ribute("media"); if (media != null && !/screen/.test(rCase())) { ribute("media", "screen"); } if (heet) { //ie
t += cssCode; } else if (ObjectFor) { TML += cssCode; //⽕狐⽀持直接innerHTML添加样式表字串
} else { Child(TextNode(cssCode)) } }
4.动态加载css⽂件，这个就简单了 function addStyle(stylePath) { var container = mentsByTagName("head")[0]; var addStyle = Element("link"); = "stylesheet"; = "text/css"; = "screen"; = stylePath; Child(addStyle); } addStyle('css/');
发布评论