1.DOM对CSS的操作
- 读取和修改内联样式
- 使用style属性来操作元素的内联样式,无法读取样式表(在style中设置的样式)中的样式
- 读取内联样式:
语法:元素.style.样式名
- 例子:
元素.style.width
元素.style.height
- 注意:如果样式名中带有-(在js中是不合法的),则需要将样式名修改为驼峰命名法 将-去掉,然后-后的字母改大写
- 比如:background-color --> backgroundColor
border-width ---> borderWidth
- 修改内联样式(通过js来修改元素的样式,注意下面的元素要先获得):
-语法:元素.style.样式名 = 样式值
- 通过style修改的样式都是内联样式,由于内联样式的优先级比较高,所以我们通过JS来修改的样式,往往会立即生效, 但是如果样式中设置了!important,则内联样式将不会生效 。 !importtant的优先级比js设置的样式还要高,即使设置了js样式也不会起作用,所以尽量不要设置 !importtant。
- 读取元素的当前样式 (样式表和内联样式哪个生效读取的就是哪个)
- 正常浏览器
- 使用getComputedStyle()
- 这个方法是window对象的方法,可以返回一个对象,这个对象中保存着当前元素生效样式
-可以通过对象.样式,来获取元素的样式
-如果元素没有设置该样式,他会获取到真实的值,而不是默认值;比如,没有设置元素的宽度,他不会返回auto,而是返回真实充满父元素的一个像素值,背景颜色的没设置获得的是为transparent
-注意:该方法不支持ie8及以下的浏览器
- 需要传入两个参数:
1.要获取样式的元素
2.可以传递一个伪元素,一般传null
- 例子:
获取元素的宽度
getComputedStyle(box , null)["width"];或getComputedStyle(box , null).width
- 通过该方法读取到样式都是只读的不能修改,如果要修改必须通过style属性
- IE8
- 使用currentStyle(获取元素当前显示的样式,指的是样式表和内联样式哪个生效读取的就是哪个,即元素当前显示出来的样式,如果当前元素没有设置该样式,那获取的是他的默认样式,宽度的默认值为auto,背景颜色的默认值为transparent)
-该方法只有ie浏览器支持,其他的浏览器都不支持
- 语法:
元素.currentStyle.样式名
- 例子:
box.currentStyle["width"]
- 通过这个属性读取到的样式是只读的不能修改,如果要修改必须通过style属性
-自己一个适合所有浏览器的获取元素当前样式的函数:
注意:上面这个图再没添加window.时getCurrentStyle就是一个变量,局部未找到去全局找还未找到报错,添加后,变为了一个对象的方法,没找到返回undefined,不会报错,这两种有就返回true,所以通过查看浏览器有没有该方法或属性,来判断浏览器支不支持该方法或属性
- 其他的样式相关的属性:这些属性返回值不带px,都是数字,可以直接进行计算
注意:以下样式都是只读的
clientHeight
- 元素的可见高度,指元素的内容区和内边距的高度
clientWidth
- 元素的可见宽度,指元素的内容区和内边距的宽度
offsetHeight
- 整个元素的高度,包括内容区、内边距、边框
offfsetWidth
- 整个元素的宽度,包括内容区、内边距、边框
offsetParent
- 当前元素的定位父元素
-会获取到离他最近的开启了定位的祖先元素,如果所有的元素都没有开启定位,则返回body
offsetLeft
- 当前元素相对于其定位父元素的水平偏移量
offsetTop
-当前元素相对于其开启定位父元素的垂直偏移量
- offsetLeft水平偏移量 offsetTop垂直偏移量
scrollHeight
scrollWidth
- 获取元素滚动区域的高度和宽度
scrollTop
scrollLeft
- 获取元素垂直和水平滚动条滚动的距离
判断滚动条是否滚动到底
- 垂直滚动条
scrollHeight - scrollTop = clientHeight
- 水平滚动
scrollWidth - scrollLeft = clientWidth
滚动条是否滚动到底练习:注意要给滚动条绑定一个滚动响应事件,disabled为true时表示禁用,为false允许使用,前往不要搞反