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("参数错误!")
}
}