本内容是《Web前端开发之Javascript视频》的课件，请配合大师哥《Javascript》视频课程学习。

JavaScript也可以针对CSS进行编程，也就是所谓的脚本化CSS；通过脚本化CSS，同样可以达到一系列的视觉效果；

在HTML中定义样式的方式有3种：通过元素包含外部样式表文件、使用 mydiv

注：以上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）；