DOM操作样式

DOM对CSS的操作

读取内联样式：

• 语法：元素.style.样式名

	元素.style.width
	元素.style.height

• 注意：如果样式名中带有-，则需要将样式名修改为驼峰命名法,将-去掉，然后-后的字母改大写

	background-color --> backgroundColor
	border-width ---> borderWidth

• 通过style属性设置和读取的都是内联样式，无法读取样式表中的样式。

修改内联样式：

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

读取元素的当前样式

IE浏览器

• 语法：元素.currentStyle.样式名
• 用来读取当前元素正在显示的样式，如果当前元素没有设置该样式，则获取它的默认值。
• currentStyle只有IE浏览器支持。

	box.currentStyle["width"]
	box.currentStyle.width

• 通过这个属性读取到的样式是只读的不能修改，如果要修改必须使用style属性。

其他浏览器

getComputedStyle()

• 这个方法是window对象的方法，会返回一个对象，这个对象中封装了当前元素生效的样式。可以通过对象.样式名来读取样式，如果获取的样式没有设置，则会获取到真实的值，而不是默认值。比如：没有设置width，它不会获取到auto，而是一个长度。
• 参数：

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

	getComputedStyle(box , null)["width"];
	getComputedStyle(box , null).width;

• 该方法不支持IE8及以下的浏览器
• 通过该方法读取到样式是只读的不能修改，如果要修改必须使用style属性。
• 兼容IE8和其他浏览器的方法

		//定义一个函数,用来获取指定元素的当前的样式
        //参数:obj要获取样式的元素 name样式名
        function getStyle(obj,name){
            if(window.getComputedStyle){
                //正常浏览器
                return getComputedStyle(obj,null)[name];
            }else{
                //ie8
                return obj.currentStyle[name];
            }
        }

其他的样式相关的属性

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

1. clientHeight、clientWidth
   这两个属性可以获取元素的可见高度和宽度，指元素的内容区和内边距的高度，返回的是一个数字（不带px），可以直接进行计算。
2. offsetHeight、offfsetWidth
   整个元素的高度和宽度，包括内容区、内边距、边框
3. offsetParent

• 获取当前元素的定位父元素
• 指离当前元素最近的开启了定位的祖先元素，如果所有的元素都没有开启定位，则返回body

4. offsetLeft、offsetTop

• 当前元素和其定位父元素之间的偏移量
• offsetLeft水平偏移量 offsetTop垂直偏移量

5. scrollHeight、scrollWidth

• 获取元素整个滚动区域的高度和宽度

6. scrollTop、scrollLeft

• 获取元素垂直和水平滚动条滚动的距离
• 判断滚动条是否滚动到底

	垂直滚动条
	scrollHeight - scrollTop = clientHeight
	水平滚动条
	scrollWidth - scrollLeft = clientWidth

补充：

• onscroll 事件会在元素的滚动条滚动时触发
• chrome认为浏览器的滚动条是body的，获取当前页面的滚动条纵坐标可以通过body.scrollTop来获取
• 火狐等浏览器认为滚动条是html的，获取当前页面的滚动条纵坐标可以通过documentElement.scrollTop