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>
相关推荐
奋飛14 分钟前
TypeScript系列:第六篇 - 编写高质量的TS类型
javascript·typescript·ts·declare·.d.ts
_WndProc19 分钟前
【Python】Flask网页
开发语言·python·flask
sunbyte23 分钟前
50天50个小项目 (Vue3 + Tailwindcss V4) ✨ | ThemeClock(主题时钟)
前端·javascript·css·vue.js·前端框架·tailwindcss
小飞悟31 分钟前
🎯 什么是模块化?CommonJS 和 ES6 Modules 到底有什么区别?小白也能看懂
前端·javascript·设计
浏览器API调用工程师_Taylor32 分钟前
AOP魔法:一招实现登录弹窗的全局拦截与动态处理
前端·javascript·vue.js
FogLetter33 分钟前
初识图片懒加载:让网页像"懒人"一样聪明加载
前端·javascript
liujing1023292935 分钟前
Day04_刷题niuke20250703
java·开发语言·算法
呆呆的心39 分钟前
JavaScript 深入理解闭包与柯里化:从原理到实践 🚀
javascript·面试
快起来别睡了40 分钟前
看完这篇文章,你就知道什么是proxy
javascript
请你吃div41 分钟前
JavaScript 实用函数大全(超实用)
前端·javascript·面试