DOM启蒙——第六章

 1.样式属性概览

●每个HTML元素都有个style属性，可以用来插入针对该元素的内联CSS属性。

●元素style属性返回一个CSSStyleDeclaration对象，该对象仅包含元素的内联样式。

var P=document.getElementById("para");

var div=document.getElementById("css");

P.appendChild(document.createTextNode(div.style));

2.获取、设置和移除单个内联CSS属性。

○通过style对象可以获取、设置或移除某个元素上单个CSS属性。

○style对象中的属性名不含CSS中属性名的横线，遇到横线应改为驼峰体。如

○font-size应改为fontSize.

○如果CSS属性名是一个JavaScript关键字，则JavaScript CSS属性名会加上css前缀。如

float会改为 cssFloat.

○对于任何需要单位的属性，要加上单位。如style.width="100px"，而不是style.width="100";

○CSS属性中的

● text-decoration:blink对应JavaScript属性为textDecorationBlink;

●text-decoration:line-through对应为textDecorationLineThrough

● text-decoration:none对应为textDecorationNone;

●text-decoration:overLine对应为textDecorationOverline

●text-decoration:underLine对应为textDecorationUnderline

●set

div.style.backgroundColor="blue";

div.style.border="3px solid red";

div.style.width="100px";

div.style.height="100px";

●get

P.appendChild(document.createTextNode("BGColor: "+div.style.backgroundColor));

P.appendChild(document.createTextNode("border: "+div.style.border));

P.appendChild(document.createTextNode("width: "+div.style.width));

●remove

div.style.backgroundColor="";

div.style.border="";

div.style.width="";

div.style.height="";

○ style对象是个CSSStyleDeclaration对象，它不仅提供了单个CSS属性的访问方式，也提供setPropertyValue(propertyName)、

getPropertyValue(propertyName)以及removeProperty()方法操作单个css属性。

○ 传给setProperty()和gerProperty()的属性名称是带有横线的CSS属性名。

●set

div.style.setProperty("background-color","pink");

div.style.setProperty("border","2px dashed green");

div.style.setProperty("width","200px");

div.style.setProperty("height","200px");

●get

P.appendChild(document.createTextNode("BGColor:"+div.style.getPropertyValue("background-color")));

P.appendChild(document.createTextNode("border:"+div.style.getPropertyValue("border")));

P.appendChild(document.createTextNode("width:"+div.style.getPropertyValue("width")));

●remove

div.style.removeProperty("background-color");

div.style.removeProperty("border");

div.style.removeProperty("width");

3 获取、设置及移除所有内联CSS属性。

●使用CSSStyleDeclaration对象的cssText属性和getAttribute()、setAttribute()方法可以使用JavaScript字符串获取、设置及移除style属性的整个值(即所有内联CSS属性)。

div.style.cssText="background-color:gray;border:1px groove purple;height:100px;width:100px;";

●使用setAttribute()设置style属性

div.setAttribute("style","background-color:orange;border:2px dashed blue;height:100px;width:100px;");

●使用getAttribute()获取style属性

P.appendChild(document.createTextNode(div.getAttribute("style")));

4.使用getComputedStyle()获取元素的已计算样式(包含任何级联样式的实际样式)

style属性值只包含通过HTML中style属性定义的CSS，要获得元素级联包括内联样式后的CSS，可以用getComputedStyle()。

此方法提供一个只读的类似CSSStyleDeclaration对象。

●获取背景：

P.appendChild(document.createTextNode(window.getComputedStyle(div).backgroundColor));

●获取边框：

P.appendChild(document.createTextNode(window.getComputedStyle(div).border));

getComputedStyle()返回的对象上不能设定任何值。是只读的。返回的颜色格式为rgb()。

5.使用class及id属性应用或者移除元素的CSS属性

定义在内联样式表或者外部样式表的样式规则可以通过操作元素上的class和id属性添加或移除。

●使用setAttribute()和classList.add()通过设置class与id值应用样式到元素

div.setAttribute("id","bar");

div.classList.add("class");

●使用removeAttribute()与classList.remove()移除规则

div.removeAttribute("id");

div.classList.remove("class")