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>
相关推荐
流星白龙3 分钟前
双端迭代器:从 `next_back()` 到零拷贝“滑动窗口”——Rust DoubleEndedIterator 全景指南
开发语言·后端·rust
Aurorar0rua8 分钟前
C Primer Plus Notes 10
c语言·开发语言·算法
梵得儿SHI16 分钟前
Vue 数据绑定深入浅出:从 v-bind 到 v-model 的实战指南
前端·javascript·vue.js·双向绑定·vue 数据绑定机制·单向绑定·v-bind v-model
Moment18 分钟前
Electron 发布 39 版本 ,这更新速度也变态了吧❓︎❓︎❓︎
前端·javascript·node.js
自由日记23 分钟前
前端学习:选择器的类别
前端·javascript·学习
江城开朗的豌豆24 分钟前
Webpack打包:从“庞然大物”到“精致小可爱”
前端·javascript
安当加密24 分钟前
基于ASP身份认证网关实现Web系统免代码改造的单点登录方案
java·开发语言·前端
island131432 分钟前
Rust 零成本抽象原理:性能与安全性的编译期融合
开发语言·rust
头发还没掉光光35 分钟前
Linux多线程之生产消费模型,日志版线程池
linux·运维·开发语言·数据结构·c++