Js:DOM中的样式(包含行内样式、滚动样式、可见区域样式等)

这部分还在更新

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):
offsetParent - 包含width+padding+border
⑥ 获取当前元素相对于其定位父元素的水平偏移量: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.borderWidth
            console.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.clientWidth
            console.log('box1Dom可见宽度',box1DomClientWidth) // 120px


            /**
             * 获取元素整个的宽度和高度(不带px):
             *   offsetWidth - 包含width+padding+border
             *   offsetHeight - 包含width+padding+border
            */
            let box1DomOffsetWidth = box1Dom.offsetWidth
            console.log('box1Dom整个的宽度',box1DomOffsetWidth) // 130px


            /**
             * 获取当前元素的定位父元素(获取到离当前元素最近的祖先定位,如果没有开启定位的祖先元素,则返回body):
             *   offsetParent - 包含width+padding+border
            */
            let box1DomOffsetParent = box1Dom.offsetParent
            console.log('box1Dom的定位父元素',box1DomOffsetParent) // body


            /**
             * 获取当前元素相对于其定位父元素的水平偏移量:offsetLeft
             * 获取当前元素相对于其定位父元素的垂直偏移量:offsetTop
            */
            let box1DomOffsetLeft = box1Dom.offsetLeft
            console.log('box1Dom相对于其定位父元素的水平偏移量',box1DomOffsetLeft) // 相对于body
        }
    </script>
</body>
</html>
相关推荐
@。1241 小时前
对于灰度发布(金丝雀发布)的了解
开发语言·前端
C+ 安口木1 小时前
vue中监听window某个属性被添加或值的变化
前端·javascript·vue.js
CoderYanger2 小时前
前端基础-HTML入门保姆级课堂笔记
前端·javascript·css·html
赛博切图仔2 小时前
qiankun、micro-app、wujie,2025年我们该选谁?
前端·javascript
hsjkdhs2 小时前
C++之多层继承、多源继承、菱形继承
开发语言·c++·算法
Full Stack Developme2 小时前
Python Redis 教程
开发语言·redis·python
qq_4924484463 小时前
Jmeter设置负载阶梯式压测场景(详解教程)
开发语言·python·jmeter
im_AMBER3 小时前
Web 开发 27
前端·javascript·笔记·后端·学习·web
ID_180079054733 小时前
京东获取整站实时商品详情数据|商品标题|数据分析提取教程
java·开发语言
玩代码3 小时前
vue项目安装chromedriver超时解决办法
前端·javascript·vue.js