`

犀牛书第五版读书笔记——Chapter 16. Cascading Style Sheets and Dynamic HTML

HTML读书CSSIE浏览器 
阅读更多
1.浏览器内置有默认的样式表，用户可以用自己的设置来改变默认值。这也是为什么页面在不同的浏览器中视觉效果不同的原因

2.通过一个ElementNode的style属性，可以编辑该元素的一些CSS属性。不同的浏览器对该属性的实现是不同的： 
var s = document.i1.style;
var count = 0;
for ( var prop in s) {
    count++;
}
alert(count);

执行上面的代码，FF下支持202个属性，IE下只有148个，Google浏览器只有11个

3.element.style属性获取的CSS2Properties对象，只包含内联的css样式，通过外部css文件设置的属性，用style属性无法取到。同样，设置这个值，实际上设置的是内联样式，将覆盖外部css文件的设置值 
var p1 = document.getElementById("p1");
var s = p1.style;
alert(s.color);


<body>
	<button id="b1">click me</button>
	<p id="p1" style="color:red;">hello world</p>
</body>

将显示"red"，如果是用外部css文件设置，则没有值

4.CSS属性是多个单词用-连接的，在javascript里会改用驼峰方式命名 
element.style.fontFamily = "sans-serif";


5.给style的属性赋值时，一定是使用string

6.所有的位置属性都需要单位 
element.style.left = "300px";

同样，取出位置属性，也是带有单位的string

7.window对象的getComputedStyle()方法，返回CSS2Properties对象。不同于element.style属性只包含内联样式，这个返回值包含了内联样式和外部CSS文件定义的样式。该方法接受两个参数，第一个参数是要计算的元素，第二个参数是CSS的伪类。FF和Google浏览器支持这个方法 
var p1 = document.getElementById("p1");
var s = getComputedStyle(p1, null);
alert(s);
for ( var prop in s) {
    alert(prop + ": " + s[prop]);
}


8.IE不支持上述方法，但是它提供了类似的功能。每个元素都有currentStyle属性

9.可以设置外部CSS文件是否生效 
<link id="css1" type="text/css" rel="stylesheet" href="../styles/css.css" />


function toggleCssSheet() {
    var c1 = document.getElementById("css1");
    c1.disabled = !c1.disabled;
}


10.FF还支持直接操作CSS样式表文件，不过作用不大
2
顶
1
踩
分享到：
| 犀牛书第五版读书笔记——Chapter 15. Scri ...
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics