JavaScript第九章：style属性

1.三体一位的网页

• 结构层：由HTML或XHTML之类的标记语言负责创建
• 表示层：由CSS负责，描述页面内容应该如何呈现
• 行为层：JavaScript语言和DOM负责内容应该如何响应事件这一问题

     网页的表示层和行为层总是存在的，即使未明确地给出任何具体的指令也是如此。Web浏览器将应用它的默认样式和默认事件处理函数。

     网页设计时，应将结构层、表示层和行为层分离。分别使用不同的技术负责这三层。但是，这三层技术之间有一些潜在的重叠区域。

 

2.Style属性

     每个对象都有各种各样的属性。

     a）告诉我们文档中各节点的关系信息：parentNode、nextSibling、previousSibling、childNodes、firstChild和lastChild。

     b）包含元素本身的信息：nodeName

     c）style属性：包含了元素的样式。查询这个属性返回的是一个对象。样式都存放在这个style对象的属性里。

<p id="example" style="color:grey; font-family:'Arial',sans-serif;">
 An example of a paragraphy
</p>

①获取样式

   a)

 （ 当需要引用一个中间带有减号的CSS属性时，DOM要求使用驼峰命名法。不管CSS样式属性的名字带有多少连字符，DOM一律采用驼峰命名法来表示它们）

    获取style对象的font-family属性：element.style.fontFamily

    获取style对象的background-color属性：element.style.backgroundColor

    获取style对象的font-weigh属性:element.style.fontWeigh

    获取style对象的color属性:element.style.color

   b)

    DOM在表示样式属性时采用的单位并不总是与它们在CSS样式表里的设置相同。绝大部分样式属性的返回值与它们的设置值都采用了相同的计量单位。

   c)

     使用CSS速记属性，可以把多个样式组合在一起写成一行。

     如果声明了 font:12px,'Arial',sans-serif。CSS font-size属性就被设置为12px，CSS font-family就被设置为‘Arial’，sans-serif。

   d)内嵌对象

       通过style属性获取样式有很大局限：style属性只能返回内嵌样式。只有把CSS style属性插入到标记里才可以用DOM style属性去查询那些信息。

       因此这样做没有实用价值，因为样式应该与标记分离开来。

       但是DOM设置的样式，就可以用DOM再把它们检索出来。

 

②设置样式

     许多DOM属性为只读，而style属性恰恰是可读写的属性。我们可以利用style属性去更新样式。

    element.style.property=value;

     style属性值永远为一个字符串。如果忘记给要设置的值加引号，JavaScript就会把等号右边的值解释为一个对象。

     用赋值操作符可以设置任何一种样式属性：

  para.style.font="2em 'Times',serif";