本内容是《Web前端开发之Javascript视频》的课件，请配合大师哥《Javascript》视频课程学习。
JavaScript也可以针对CSS进行编程，也就是所谓的脚本化CSS；通过脚本化CSS，同样可以达到一系列的视觉效果；
在HTML中定义样式的方式有3种：通过link元素包含外部样式表文件、使用style元素定义嵌入式样式、以及使用style特性定义特定元素的内联样式；
DOM2级样式模块围绕这3种应用样式的机制提供了一套API，可以检测浏览器支持DOM2级定义的CSS能力；
varsupportsDOM2CSS=document.implementation.hasFeatu("CSS","2.0");varsupportsDOM2CSS2=document.implementation.hasFeatu("CSS2","2.0");
脚本化内联样式：
脚本化CSS最简单直接的方式就是更改文档元素的style属性；任何支持style特性的HTML元素在Javascript中都有一个对应的style属性，这个style属性比较特殊，它不是字符串，而是一个CSSStyleDeclaration对象，包含着通过HTML的style特性指定的所有样式信息，但不包含从外部样式表或嵌入样式表经层叠而来的样式；
varmydiv=document.getElementById("mydiv");console.log(mydiv.style);//CSSStyleDeclarationmydiv.style.fontSize="24px";mydiv.style.color="purple";
style属性作为CSSStyleDeclaration对象，其就代表了内联样式，其保存了所有的样式属性，但如果元素没有设置style特性或没有使用脚本设置该特性，style中的样式属性值均为空字符串；
只要取得一个有效的DOM元素的引用，就可以随时使用Javascript为其设置样式；
varmyDiv=document.getElementById("myDiv");myDiv.style.backgroundColor="d";myDiv.style.width="px";myDiv.style.height="px";myDiv.style.border="1pxsolidblack";
以这种方式改变样式时，元素的外观会自动被更新；
通过style对象，同样可以取得style特性中指定的样式；
varmydiv=document.getElementById("mydiv");console.log(mydiv.style.backgroundColor);console.log(mydiv.style.width);console.log(mydiv.style.height);
脚本化的CSS属性的名称和值：
在style特性中指定的任何CSS属性都将表现为这个style对象的相应属性；对于使用短划线的CSS属性名，必须将其转换成驼峰大小写形式，才能通过js来访问，如：
CSS属性JS属性background-image style.backgroundImagecolorstyle.colordisplaystyle.displayfont-familystyle.fontFamily
多数情况下，都可以通过简单地转换属性名的格式来实现转换，但是，当一个CSS属性名在Javascript中如果是保留字或关键字时，在其前加”css”前缀，例如float属性，由于float是JS中的保留字，因此不能被用作属性名，其值应为cssFloat；低版本IE支持styleFloat；
mydiv.style.backgroundColor="purple";mydiv.style.borderRightStyle="solid";mydiv.style.borderRightColor="gen";mydiv.style.cssFloat="left";mydiv.style.styleFloat="left";
通过CSSStyleDeclaration对象设置style属性值时，值都应该是字符串，都应该放到引号内，并且不带分号；
在标准模式下，所有度量值都必须指定一个度量单位；在混合模式下，可以省略单位；
mydiv.style.width=;//错误，但在混杂模式下默认为pxmydiv.style.width="";//错误，但在混杂模式下默认为px
通过计算得来的值，也要在最后加上单位；
varx=10,leftMargin=20,leftBorder=10;mydiv.style.left=(x+leftMargin+leftBorder)+"px";
带单位唯一不好的地方就是，如果要获取这个值，参与其他的数学运算，因为其是字符串，所以不能直接使用，必须转换为数值才能参与运算，例如使用parseInt()或parseFloat()等方法进行转换；
varct=mydiv.getBoundingClientRect();console.log(ct);varborderWidth=parseFloat(mydiv.style.width);console.log(borderWidth);
一些CSS属性是复合属性，比如：margin就是margin-top、margin-right、margin-bottom、margin-left的复合属性；CSSStyleDeclaration对象也有与之对应的复合属性；
mydiv.style.margin="20px30px40px50px";mydiv.style.marginTop="50px";mydiv.style.marginLeft="50px";
当设置复合属性margin时，其会自动计算其所对应的相关联的属性；
即然style是元素的特性，那么也可以通过setAttribute()、getAttribute()等方法来设置style特性；
mydiv.setAttribute("style","width:px;height:px;background-color:purple;");console.log(mydiv.style);console.log(mydiv.getAttribute("style"));
style对象的属性和方法：
style对象中还定义一些属性和方法，这些属性和方法在提供元素的style特性值的同时，也可以修改样式；
cssText：能够访问到style特性中的CSS代码；
length：应用给元素的CSS属性的数量；
pantRule：表示CSS信息的CSSRule对象；
getPropertyCSSValue(propertyName)：返回包含给定的属性的值CSSValue对象；已废弃；
getPropertyPriority(propertyName)；如果给定的属性使用了!important设置，则返回important；否则返回空字符串；
getPropertyValue(propertyName)：返回给定的属性的值；
item(index)：返回给定位置的CSS属性的名；
moveProperty(propertyName)：从样式中删除给定的属性；
setProperty(propertyName,value,priority)：为给定的属性设置为属性值，并加上优先权标志(”important”或一个空字符串)；
cssText属性：返回浏览器对style特性中CSS代码的内部表示，在写入模式下，赋给cssText的值会重写整个style特性的值；
mydiv.style.cssText="width:px;height:px;background-color:purple;";console.log(mydiv.style.cssText);console.log(mydiv.getAttribute("style"));
设置cssText属性的目的就是为元素快速应用多个CSS特性，可以一次性应用所有的变化；
item()方法和length属性：设计length属性的目的，就是将其与item()方法配套使用，以便迭代元素中定义的CSS属性名；在使用length和item()时，style对象实际上是一个集合，可以使用方括号来代替item()来取得给定位置的css属性名；
console.log(mydiv.style.length);for(vari=0;imydiv.style.length;i++){//console.log(mydiv.style.item(i));console.log(mydiv.style[i]);}
getPropertyValue(propertyName)方法：取得给定的属性的值；
console.log(mydiv.style.getPropertyValue("background-color"));for(vari=0;imydiv.style.length;i++){varprop=mydiv.style[i];//取得属性名varvalue=mydiv.style.getPropertyValue(prop);//取得属性值console.log(prop+":"+value);}
getPropertyCSSValue(propertyName)方法：该方法会返回一个包含两个属性的CSSValue对象，这两个属性分别是：cssText和cssValueType，其中cssText属性的值与getPropertyValue()方法返回的值相同，而cssValueType属性则是一个数值常量，表示值的类型：0表示继承的值，1表示基本的值，2表示值列表，3表示自定义的值；
varvalue=mydiv.style.getPropertyCSSValue("background-color");console.log(value);console.log(value.cssText);console.log(value.cssValueType);
这个方法已经被废弃了，几乎所有的浏览器都不支持；
getPropertyPriority(propertyName)；如果给定的属性使用了!important设置，则返回important；否则返回空字符串；
console.log(mydiv.style.getPropertyPriority("background-color"));//important
setProperty(propertyName,value,priority)：为给定的属性设置为属性值，并加上优先权标志，priority为可选（”important”或一个空字符串）；
mydiv.style.setProperty("background-color","purple","important");
moveProperty(propertyName)方法：可以从元素的样式中移除某个CSS属性，移除一个属性，意味着该属性将应用默认的样式（从其他样式表经层叠而来）；
mydiv.style.moveProperty("background-color");
pantRule：只读，表示CSS信息的CSSRule对象；
varrule=mydiv.style.pantRule;console.log(rule);//null
计算的样式：
虽然style对象能够提供style特性所有样式信息，但它不包含那些从其他样式表层叠而来并影响到当前元素的实际样式信息；所以，需要使用计算样式；
计算样式是一组属性值，它由浏览器通过把内联样式结合所有链接样式表中所有可应用的样式规则后导出（计算）得到的，也就是一组在呈现元素时实际使用的属性；
getComputedStyle()方法：
该方法是window对象的方法，可以通过window.getComputedStyle()，或者document.defaultView.getComputedStyle()方法调用，而document.defaultView的返回值就是window；
该方法接受两个参数：要取得计算样式的元素和一个伪元素字符串(如：:after)；如果不需要伪元素，第二个参数可以为null或一个空字符串；该方法返回一个CSSStyleDeclaration对象，与style属性的类型相同，区别在于它是只读的，其中包含当前元素的所有计算的样式；
style#mydiv{background-color:purple;width:px;height:px;}/styledivid="mydiv"style="background:pink;border:1pxsolidblack;"mydiv/divscriptvarmydiv=document.getElementById("mydiv");var