第十二章：第35节DOM——style对象
更新于：2017-11-19 19:08:00
用JS给一元素标签增加样式，目前我们可用两种方法:
1)元素节点对象.style = "border:2px solid #FF0000;";
2)元素节点对象.setAttribute(“style” ,“border:2px solid #FF0000;”);
本质上两种用法是一个意思，以CSS字符串的形式直接修改元素节点对象的style属性值。
在本章31节示例中用console.log输出一节点对象的style值，返回的不是CSS字符串，而是style对象。
每一个HTML标记都有style属性(行内样式)，但这个属性在DOM中，又是一个对象，也就是style对象。
style对象有很多属性，修改style对象的属性也能更改标记样式。
注意：前面我们学习元素节点对象时，标记元素的属性（w3c规定的属性）可直接当作元素节点对象的属性来用。可CSS中属性有很多是不能直接当作style对象的属性来用。
CSS中属性太多了，相应的style对象中的属性也很多，大家可查手册查看。
说说CSS中的属性与style对象中的属性命名区别：
1）如果CSS中的属性是一个单词，那么与style对象的属性一一对应。
CSS中的属性 style对象属性
width style.width
height style.height
color style.color
margin style.margin
…………
2）如果CSS中的属性是多个单词，那么与style对象的属性不太一样。
转换的原则：第一个单词全小写，后面每个单词首字母大写，并去掉中间的连接符“-”，也就是全部改成“小驼峰命名法”。
CSS中的属性 style对象的属性
font-size style.fontSize
font-family style.fontFamily
background-color style.backgroundColor
background-repeat style.backgroundRepeat
代码示例：
总结下：
给元素对象增加样式，有以下三种方法，但这三种方法加的都是“行内样式”。
setAttribute(“style” ,“border:2px solid #FF0000”);
imgObj.style = “border:2px solid #ff000”
imgObj.style.border = “2px solid #FF000”;
注意：以上同名CSS属性会从下往上覆盖的。