【DOM编程艺术】style属性 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>Example</title>
</head>

<body>
<p id='example' style="color:grey; font-family:Arial, Helvetica, sans-serif">
An example of a paragraph
</p>
<script>
window.onload=function(){
    var para=document.getElementById('example');
    alert(typeof para.nodeName); //string
    alert(typeof para.style);    //object
}
</script>
</body>
</html>

事实证明：element.style将返回一个对象，样式都存放在这个style对象的属性里。

不仅文档里的每个元素都是一个对象，每个元素都有一个style属性，他们也是一个对象。

<script>
window.onload=function(){
    var para=document.getElementById('example');
    console.log(para.style.font-family);    //会出现错误:family is not defined
　　应改成console.log(para.style.fontFamily);
　　alert(para.style.color);  //有的浏览器会输出RGB值（比如firefox）,ie会输出#999999
}
</script>

解析：Javascript将把减号前面的内容解释为"元素的style属性的font属性"，把减号后面的内容解释为一个名为family的变量，把整个表达式解释为一个减法运算。

补充：减号和加号之类的操作符是保留字符，不允许用在函数或变量的名字里。这同时意味着它们也不能用在方法或属性的名字里

规定：当你需要引用一个中间带减号的CSS属性时，DOM要求你用驼峰命名法。css属性里的font-family变为DOM属性的fontFamily：element.style.fontFamily

　　　不管css样式属性的名字里有多少个连字符，DOM一律采用驼峰命名法来表示它们。

通过style属性只能返回内嵌样式。换句话说，只有把CSS style属性插入到标记里，才可以用DOM style属性去查询那些信息：

　　<p id='example' style='color:grey;font:12px'></p>

style对象的各个属性都是可读写的。不仅可以获取样式，还可以更新样式。element.style.property=value //更新样式 value必须是字符串，加引号

posted @ 2014-04-20 22:26  Western Journey  阅读(255)  评论(0)  编辑  收藏  举报