【DOM编程艺术】style属性
2014-04-20 22:26
330 查看
<!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必须是字符串,加引号
相关文章推荐
- CSS-DOM设计style属性的艺术
- DOM编程艺术(属性操作)
- 【DOM编程艺术】position属性
- 【DOM 编程艺术】3.5 获取和设置属性
- Javascript DOM 编程艺术:Creating Markup on the Fly
- DOM编程艺术(BOM)
- [读书笔记]javascript编程艺术——CH3 DOM
- JS DOM编程艺术-笔记
- 【javascript之Dom编程艺术】六
- Dom编程艺术第三章
- javascript_DOM 编程艺术学习笔记(三)
- JavaScript DOM 编程艺术学习笔记(一):静态标记
- JS DOM 编程艺术(第2版)读书笔记 第11章 HTML5
- 【DOM编程艺术】实时动画---幻灯片
- javascript dom 编程艺术 CSS DOM
- JavaScript Dom 编程艺术 笔记
- javaScript.DOM. 编程艺术第二版
- img src属性 DOM编程下 img.src与element.getAttribute("src")的区别
- javascript Dom 编程艺术:ANIMATED SLIDESHOW
- JavaScript DOM编程基本原则和习惯总结(JavaScript+DOM编程艺术)