css函数-设置或读取对象的属性

HTML

<div class="container">
    <div id="box" class="box">
        <div class="btns">
            <button onclick="getStyle()">Get Style</button>
            <button onclick="setStyle()">Set Style</button>
            <button onclick="default_style()">Default Style</button>
        </div>
    </div>
    <div class="box"></div>
</div>

JS

var box = document.getElementById('box');
    function getStyle() {
        var background_color = window.getComputedStyle(box, null).getPropertyValue("background-color");
        var width = window.getComputedStyle(box, null).getPropertyValue("width");
        var height =  window.getComputedStyle(box, null).getPropertyValue("height");
        alert("width: "+width + '\n' +  "height: "+height + '\n' + "background-color: "+background_color)
    }
    function setStyle() {
        box.style.width = 330 + 'px';
        box.style.height = 100 + 'px';
        box.style.backgroundColor = 'rgb(239, 248, 255)';
        box.style.borderColor = 'blue';
        for (var i=0; i<3; i++) {
            document.getElementsByTagName('button')[i].style.backgroundColor = 'blue'
        }
    }
    function default_style() {
        box.style.width = 400 + 'px';
        box.style.height = 200 + 'px';
        box.style.backgroundColor = 'rgb(254, 244, 235)';
        box.style.borderColor = 'orangered';
        for (var i=0; i<3; i++) {
            document.getElementsByTagName('button')[i].style.backgroundColor = 'orangered'
        }
    }

getComputedStyle方法给出应用活动样式表后的元素的所有CSS属性的值,返回CSSStyleDeclaration表示一个css属性键值对的集合,getPropertyValue是其的方法之一,返回属性值,以下示例返回的就是属性值
例

    var style1 = getComputedStyle(target, null).getPropertyValue('background-color');

alert()中换行 +'\n'+

这个函数写的好,这样简单了好多

function css(obj, attr, value)
{
    switch (arguments.length)
    {
        case 2:
            if(typeof arguments[1] == "object")
            {    //二个参数, 如果第二个参数是对象, 批量设置属性
                for (var i in attr)obj.style[i] = attr[i]
            }
            else
            {    //二个参数, 如果第二个参数是字符串, 读取属性值
                return obj.currentStyle ? obj.currentStyle[attr] : getComputedStyle(obj, null)[attr]
            }
            break;
        case 3:
            //三个参数, 单一设置属性
            obj.style[attr] = value;
            break;
        default:
            alert("参数错误！")
    }
}