动态添加css
好久没写⽂章了今天关于动态添加css⽂件写⼀点想法
1. 第⼀种添加⽅式：
这种⽅式采⽤内联是插⼊css.优先级⾼。容易引起页⾯回流性能不好也不能进⾏多个样式的添加
2. 第⼆种⽅式：
这种⽅式相⽐第⼀种优点是可以⼀次进⾏多个样式的设定，但仍是内联式，引起页⾯回流，多次插⼊引起性能上的消耗。
3. 第三种是：直接在style标签中写，这种⽅法要考虑不同浏览器的兼容性问题。（声明：下⾯代码引⽤”司徒正美“的⼀段代码）
var addSheet = function () {
var doc, cssCode;
if (arguments.length == 1) {
doc = document;
cssCode = arguments[0]
} else if (arguments.length == 2) {
doc = arguments[0];
cssCode = arguments[1];
} else {
alert("addSheet函数最多接受两个参数!");
}
if (! +"\v1") {//增加⾃动转换透明度功能，⽤户只需输⼊W3C的透明样式，它会⾃动转换成IE的透明滤镜
var t = cssCode.match(/opacity:(\d?\.\d+);/);
if (t != null) {
cssCode = place(t[0], "filter:alpha(opacity=" + parseFloat(t[1]) * 100 + ")")
}
}
cssCode = cssCode + "\n"; //增加末尾的换⾏符，⽅便在firebug下的查看。
var headElement = ElementsByTagName("head")[0];
var styleElements = ElementsByTagName("style");
if (styleElements.length == 0) {//如果不存在style元素则创建
if (ateStyleSheet) {    //ie
} else {
var tempStyleElement = ateElement('style'); //w3c
tempStyleElement.setAttribute("type", "text/css");
headElement.appendChild(tempStyleElement);
}
}
var styleElement = styleElements[0];
var media = Attribute("media");
if (media != null && !/screen/.LowerCase())) {
styleElement.setAttribute("media", "screen");
}
if (styleElement.styleSheet) {    //ie
styleElement.styleSheet.cssText += cssCode;
} else if (BoxObjectFor) {
styleElement.innerHTML += cssCode; //⽕狐⽀持直接innerHTML添加样式表字串
} else {
styleElement.ateTextNode(cssCode))
css样式表优先级最高
}
}
4.动态加载css⽂件，这个就简单了
function addStyle(stylePath) {
var container = ElementsByTagName("head")[0];                var addStyle = ateElement("link");
addStyle.href = stylePath;
container.appendChild(addStyle);
}
addStyle('css/add.css');

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。