前两天才刚刚想到可不可以用改变<style>标签innerHTML的方式改变dom的样式,昨天看YUI文档的时候,发现新增了StyleSheet Utility组件,其功能就是支持通过更改<style>标签的innerHTML来改变dom样式。
还没去看源码,不过,大概猜得到源码里做了些什么动作。就像我在《改变dom样式的方法》一文中说的一样,<style>标签在FF下是可以读写的,但ie下却需要通过特殊的方法实现,StyleSheet Utility组件一定会透明地对其进行封装。总之,YUI现在提供了对<style>标签innerHTML更改的组件了,那么,现在改变dom样式的方法,有三种方式可以自由选择了。
YUI的确是不错,前两天刚想到的问题,马上就在YUI最新的组件里找到了答案,继续支持。
========================================================
续:原来在firefox下,<style>标签可以写styleNode.innerHTML="xxx{}",在IE下innerHTML不能赋值,但可以通过styleNode.styleSheet.cssText="xxx{}"来赋值。
例如:
========================================
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>阿当制作</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
<p>hello world</p>
<script type="text/javascript">
var nod = document.createElement("style"), str = "body{background:#000;color:#fff} p{font-size:20px;padding:5px;border:2px solid #fff}";
nod.type="text/css";
if(nod.styleSheet){
nod.styleSheet.cssText = str;
} else {
nod.innerHTML = str;
}
document.getElementsByTagName("head")[0].appendChild(nod);
</script>
</body>
</html>
========================================
注意,如果我们直接写在页面里,可以省掉style标签的type属性,但如果要动态加载的话,就一定需要声明styleNode.style="text/css"了,否则styleNode的styleSheet为null。
node.style=xxx这种方式还没办法修改伪类的样式,用这种方式修改样式还可以完成:hover伪类的样式修改!
=========================================
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>阿当制作</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
<a href="#">hello world</a>
<script type="text/javascript">
var nod = document.createElement("style"), str = "body{background:#000;color:#fff} a{color:#fff;text-decoration:none;} a:hover{color:red;text-decoration:underline}";
nod.type="text/css";
if(nod.styleSheet){
nod.styleSheet.cssText = str;
} else {
nod.innerHTML = str;
}
document.getElementsByTagName("head")[0].appendChild(nod);
</script>
</body>
</html>
=========================================