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

kyfxbl

浏览: 1846331 次
性别:
来自: 深圳

最近访客更多访客>>

xiong555666

kkjjww123

caiqi

mingtianfb

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

javascript

HTML 读书 CSS IE 浏览器

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 17. Even ... | 犀牛书第五版读书笔记——Chapter 15. Scri ...

2011-02-21 15:40
浏览 1539
评论(0)
分类:Web前端
查看更多

发表评论

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

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论