这部分还在更新
1、 获取行内样式:元素.style.样式名称
2、 获取当前正在显示的样式(只能读,不能修改,想要修改要使用style):
① 只有ie支持:元素.currentStyle.样式名称
② 其他浏览器:getComputedStyle(需要获取样式的元素,传递一个伪元素)
第二个参数一般传 null
该方法是
windows
对象上中的方法
返回值:key是样式名,值是样式名的对象
③ 获取元素可见区的宽度和高度(不带px
):
-
1、
clientWidth - 包含width+padding
-
2、
clientHeight - 包含width+padding
④ 获取元素整个的宽度和高度(不带px):
-
1、
offsetWidth - 包含width+padding+border
-
2、
offsetHeight - 包含width+padding+border
⑤ 获取当前元素的定位父元素(获取到离当前元素最近的祖先定位,如果没有开启定位的祖先元素,则返回body):
⑥ 获取当前元素相对于其定位父元素的水平偏移量:offsetLeft
⑦ 获取当前元素相对于其定位父元素的垂直偏移量:offsetTop
⑧ 获取滚动区域的宽度:scrollWidth
⑨ 获取滚动区域的高度:scrollHeight
⑩ 获取水平滚动条滚动的距离:scrollLeft
⑪ 获取垂直滚动条滚动的距离:scrollTop
当满足
scrollHeight - scrollTop == clientHeight
,说明垂直滚动条滚动到底当满足
scrollWidth - scrollLeft == clientWidth
, 说明水平滚动条滚动到底onscroll事件:会在滚动条滚动的时候触发
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>body {margin: 0;padding: 0;}#app {/* position: relative; */}#box1 {width: 100px;height: 100px;background-color: pink;padding: 10px;margin: 5px;}</style>
</head>
<body><div id="app"><div id="box1" style="border: 6px solid blue;"></div></div><script>window.onload = function() {let box1Dom = document.getElementById("box1")// 获取行内样式:元素.style.样式名称let borderWidth = box1Dom.style.borderWidthconsole.log('borderWidth',borderWidth) // 6px// 设置(可以增加,也可以修改)样式box1Dom.style.borderColor = 'purple'console.log('行内样式Width',box1Dom.style.width) // 获取不到/*** 获取当前正在显示的样式(只能读,不能修改,想要修改要使用style):* - 只有ie支持:元素.currentStyle.样式名称* - 其他浏览器:使用windows对象上的 getComputedStyle() 方法,此方法接收两个参数:* - 参数一:需要获取样式的元素* - 参数二:传递一个伪元素,一般传null* - 返回值:key是样式名,值是样式名的对象*/let box1DomCurrentStyle = getComputedStyle(box1Dom, null)console.log('当前正在显示的样式Width',box1DomCurrentStyle.width) // 100px/*** 获取元素可见区的宽度和高度(不带px):* clientWidth - 包含width+padding* clientHeight - 包含width+padding*/let box1DomClientWidth = box1Dom.clientWidthconsole.log('box1Dom可见宽度',box1DomClientWidth) // 120px/*** 获取元素整个的宽度和高度(不带px):* offsetWidth - 包含width+padding+border* offsetHeight - 包含width+padding+border*/let box1DomOffsetWidth = box1Dom.offsetWidthconsole.log('box1Dom整个的宽度',box1DomOffsetWidth) // 130px/*** 获取当前元素的定位父元素(获取到离当前元素最近的祖先定位,如果没有开启定位的祖先元素,则返回body):* offsetParent - 包含width+padding+border*/let box1DomOffsetParent = box1Dom.offsetParentconsole.log('box1Dom的定位父元素',box1DomOffsetParent) // body/*** 获取当前元素相对于其定位父元素的水平偏移量:offsetLeft* 获取当前元素相对于其定位父元素的垂直偏移量:offsetTop*/let box1DomOffsetLeft = box1Dom.offsetLeftconsole.log('box1Dom相对于其定位父元素的水平偏移量',box1DomOffsetLeft) // 相对于body}</script>
</body>
</html>