CSS DOM | CSSStyleDeclaration

DOM对CSS的操作

读取和修改内联样式

1. 读取内联样式：
   语法：元素.style.样式名

2. 修改内联样式：
   语法：元素.style.样式名=样式值
   注意： 如果样式名中带有-，则需要将样式名修改为驼峰命名法
   将-去掉，然后-后的字母改大写。 比如：background-color --> backgroundColor

通过style修改的样式都是内联样式， 由于内联样式的优先级比较高，所以我们通过JS来修改的样式，往往会立即生效，但是如果样式中设置了!important，则内联样式将不会生效。

读取元素的当前样式

IE

语法：元素.currentStyle.样式名
获取当前样式的值，如果没设置就会返回该样式的默认值。
注意：通过这个属性读取到的样式是只读的不能修改。只有IE能用

			window.onload = function() {
				var box = document.getElementById("box1");
				box.onclick = function(){
					alert(box.currentStyle.width);
				}
			}

其他浏览器和或IE9+

getComputedStyle()
这个方法是window对象的方法，可以返回一个对象，这个对象中保存着当前元素生效样式。
如果当前元素没有设置，会获取一个真实的值，而不是默认值。比如一个盒子没设置宽度，那width是自适应的，但是它不会返回atuo，而是返回当前为多少px。
注意： 通过该方法读取到样式都是只读的不能修改
参数：

1. 要获取样式的元素
2. 可以传递一个伪元素，一般传null

示例1 ： 使用方法

			window.onload = function() {
				var box = document.getElementById("box1");
				box.onclick = function(){
					var obj=getComputedStyle(box1,null);
					alert(obj.width);
				}
			}

示例2：box没设置宽度，返回值随着窗口大小而变

所有浏览器都兼容的方式

自己写一个获取样式的方法了：
方法1：

function getStyle(obj,name){
	if(window.getComputedStyle){
		return getComputedStyle(obj,null)[name];
	}else{
		return obj.currentStyle[name];
	}
}

方法2：

function getStyle(obj,name){
	return window.getComputedStyle?getComputedStyle(obj,null)[name]:obj.currentStyle[name];
}

示例：

其他的样式相关的属性

注意：以下样式都是只读的

• element.clientHeight 在页面上返回内容的可视高度,指元素的内容区和内边距的高度（不包括边框，边距或滚动条）
• element.clientWidth 在页面上返回内容的可视宽度指元素的内容区和内边距的高度（不包括边框，边距或滚动条）
• element.offsetHeight 整个元素的高度，包括内容区、内边距、边框
• element.offsetWidth 整个元素的宽度，包括内容区、内边距、边框
  
• offsetParent 当前元素的定位父元素，离他最近的开启了定位的祖先元素，如果所有的元素都没有开启定位，则返回body
• offsetLeft 当前元素和定位父元素之间的水平偏移量
• offsetTop 当前元素和定位父元素之间的垂直偏移量

示例：

• element.scrollHeight 返回整个元素的高度（包括带滚动条的隐蔽的地方）
• element.scrollWidth 返回元素的整个宽度（包括带滚动条的隐蔽的地方）
• element.scrollLeft 返回水平滚动条移动的距离
• element.scrollTop 返回垂直滚动条移动的距离
• scrollHeight - scrollTop = clientHeight判断垂直滚动条是否滚动到底
• scrollWidth - scrollLeft = clientWidth判断水平滚动是否滚动到底

CSSStyleDeclaration

对象属性

• cssText 设置或返回样式声明文本，cssText 对应的是 HTML 元素的 style 属性。
• length 返回样式中包含多少条声明。
• parentRule 返回包含当前规则的规则。

对象方法

• getPropertyPriority() 返回指定的 CSS 属性是否设置了 “important!” 属性。
• getPropertyValue() 返回指定的 CSS 属性值。
• item() 通过索引方式返回 CSS 声明中的 CSS 属性名。
• removeProperty() 移除 CSS 声明中的 CSS 属性。
• setProperty() 在 CSS 声明块中新建或者修改 CSS 属性。