本内容是《web前端开发之javascript视频》的课件，请配合大师哥《javascript》视频课程学习。
javascript也可以针对css进行编程，也就是所谓的脚本化css；通过脚本化css，同样可以达到一系列的视觉效果；
在html中定义样式的方式有3种：通过元素包含外部样式表文件、使用
注：以上border属性可能不会返回实际的border规则(如ie和firefox返回空字符串)，原因是不同浏览中解释复合属性的方式不同，因为设置这种属性实际上会涉及很多其他属性，例如：border，实际上调协了四个边的边框宽度、颜色等，因此border不会返回，但computedstyle.borderleftwidth会返回值；
console.log(computedstyle.borderleftwidth);console.log(computedstyle.borderleftcolor);
另外，不同浏览器表示值的方式可能会有所区别；
计算后的样式也包含属于浏览器内部样式表的样式信息，因此任何具有默认值的css属性都会表现在计算后的样式中；如visibility属性都有一个默认值，有些浏览器设置为visible，而有些设置为inherit；
计算样式的cssstyledeclaration对象和表示内联样式的对象之间有一些重要的区别：
计算样式的属性是只读的；
计算样式的值是绝对值，类似百分比和点之类的相对的单位将全部转换为绝对值；所有指定尺寸，例如外边距大小和字体大小等属性都有一个以像素为度量单位的值；相关颜色的属性将以”rgb(#,#,#)”或”rgba(#,#,#,#)”的格式返回；
不计算复合属性，它们只基于最基础的属性，例如，不要查询margin属性，应该使用marginleft或margintop等；
计算样式的csstext属性未定义（也就是该属性返回空字符串）；
计算样式和内联样式可以同时使用；
// 用指定的因子缩放元素e的文本尺寸function scale(e, factor){ // 用计算样式查询当前文本的尺寸 var size = parseint(window.getcomputedstyle(e,"").fontsize); // 用内联样式来放大尺寸 e.style.fontsize = factor * size "px";}// 用指定的因子修改元素的背景颜色// factors > 1 颜色变浅，factors < 1颜色变暗function scalecolor(e, factor){ var color = window.getcomputedstyle(e,"").backgroundcolor; var components = color.match(/[\d\.] /g); // 解析r、g、b分量 for(var i=0; i<3; i ){ // 循环r,g,b var x = number(components[i]) * factor; // 缩放每个值 x = math.round(math.min(math.max(x, 0), 255)); // 设置边界并取整 components[i] = string(x); } if(components.length == 3) // rgb()颜色 e.style.backgroundcolor = "rgb(" components.join() ")"; else // rgba()颜色 e.style.backgroundcolor = "rgba(" components.join() ")";}var mydiv = document.getelementbyid("mydiv");scale(mydiv, 1.5);scalecolor(mydiv, .5);
低版本的ie不支持getcomputedstyle()方法，但它有一种类似的概念；在ie中，具有style属性的元素还有一个currentstyle属性，该属性是cssstyledeclaration的实例，包含当前元素全部计算后的样式，但只有ie支持；
var computedstyle = mydiv.currentstyle;console.log(computedstyle.backgroundcolor);console.log(computedstyle.width);console.log(computedstyle.height);console.log(computedstyle.borderleftwidth);
兼容函数：
function getstyle(obj, attr){ if(window.getcomputedstyle) return getcomputedstyle(obj, null)[attr]; else return obj.currentstyle[attr];}var mydiv = document.getelementbyid("mydiv");var backgroundcolor = getstyle(mydiv, "background-color");console.log(backgroundcolor); // rgb(245, 222, 179)// 或者function getcss(obj, css){ return (document.defaultview.getcomputedstyle ? document.defaultview.getcomputedstyle(obj,null) : obj.currentstyle)[css];}var bordertopwidth = getcss(mydiv, "border-top-width");console.log(bordertopwidth); // 1px
封装一下函数，用来获取css属性值，如：
function getcomputedstyles(elem,prop) { var cs = window.getcomputedstyle(elem,null); if (prop) { console.log(prop " : " cs.getpropertyvalue(prop)); return; } var len = cs.length; for (var i=0;i
与伪元素一起使用：getcomputedstyle可以从伪元素中提取样式信息（例如：::after, ::before, ::marker, ::line-marker）；