脚本化CSS

设计大小

offsetWidth和offsetHeight

  • 使用offsetWidth和offsetHeight属性可以获取元素的尺寸(content+padding+border)
  • offsetWidth表示元素在页面中所占用的总宽度，offsetHeight表示元素在页面中所占用的总高度。
  • offsetWidth和offsetHeight是获取元素宽高最好的方法
  • 当元素隐藏显示时，即设置样式属性display的值为none时，offsetWidth和offsetHeight返回的值是0
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>设计大小-offsetWidth和offsetHeight</title>
    <style>
        #box{
            width: 100px;
            height: 100px;
            background-color: red;
            padding: 20px;
            border: 1px solid #000;
            margin: 10px;
            /*display: none;*/
        }
    </style>
</head>
<body>
<div id="box"> </div>
<script>
    var oBox = document.getElementById("box");
    console.log(oBox.offsetWidth);
</script>
</body>
</html>

clientWidth和clientHeight

  • 获取元素可视部分的宽度，即css的content和padding属性的和，不包含任何能滚动的区域和边框。
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>设计大小-clientWidth和clientHeight</title>
    <style>
        #box{
            width: 100px;
            height: 100px;
            background-color: red;
            padding: 20px;
            border: 1px solid #000;
            margin: 10px;
            /*display: none;*/
        }
    </style>
</head>
<body>
<div id="box"> </div>
<script>
    var oBox = document.getElementById("box");
    console.log(oBox.clientWidth);
</script>
</body>
</html>

scrollWidth和scrollHeight

  • 元素包含内容的完全宽度和padding
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>设计大小-scrollWidth和scrollHeight</title>
    <style>
        #box{
            width: 100px;
            height: 100px;
            padding: 20px;
            border: 1px solid #000;
            margin: 10px;
            overflow: auto;
            /*display: none;*/
        }
        #con{
            width: 10000px;
            background-color: red;
            height: 80px;
        }
    </style>
</head>
<body>
<div id="box">
    <div id="con"></div>
</div>
<script>
    var oBox = document.getElementById("box");
    console.log(oBox.scrollWidth);//10020
</script>
</body>
</html>

获取窗口的大小

  • 获取 <html>标签的clientWidth和clientHeight属性，就可以直到浏览器窗口的可是宽度和高度。
  • 而获取html标签的脚本表示为document.documentElement
  • 所以获取窗口宽度是 document.documentElement.clientWidth
  • 在怪异模式下，body是最顶层的可视元素，所以在怪异模式下获取窗口的宽度是 document.body.clientWidth
  • 兼容性代码就是：document.documentElement.clientWidth||document.body.clientWidth;
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>获取窗口的大小</title>
</head>
<body>
<script>  
    var oHtml = document.getElementsByTagName("html")[0];
    var oBody = document.getElementsByTagName("body")[0];
    console.log(document.documentElement === oHtml);//true
    console.log(document.body === oBody);//true

    // 打印浏览器窗口的宽高
    console.log(document.documentElement.clientHeight);
    console.log(document.documentElement.clientWidth);

    //获取窗口高度的兼容性写法
    console.log(document.documentElement.clientWidth || document.body.clientWidth);
</script>
</body>
</html>

设计位置

使用offsetLeft和offsetTop

  • offsetLeft和offsetTop属性返回当前元素的偏移位置。
  • DOM标准模式以最近的定位元素（包含块）为参考进行偏移的位置
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>设计位置-offsetLeft和offsetTop</title>
    <style>
        #outer{
            width: 500px;
            height: 500px;
            margin: 50px;
            overflow: hidden;
            background-color: red;
            padding: 10px;
            border: 1px solid #000;
            position: relative;
        }
        #inner{
            width: 300px;
            height: 300px;
            background-color: yellow;
            margin: 20px;
            padding: 10px;
            border: 1px solid #ccc;
            /*position: relative;*/

        }
        #con{
            width: 100px;
            height: 100px;
            margin: 10px;
            /*position: absolute;*/
            /*left: 40px;*/
            /*top: 40px;*/
            background-color: #0ee69c;
        }
    </style>
</head>
<body>
<div id="outer">
    <div id="inner">
        <div id="con"></div>
    </div>
</div>
<script>
    var oCon = document.getElementById("con");
    console.log(oCon.offsetLeft);
</script>
</body>
</html>

offsetParent

  • offsetParent属性表示最近的上级定位元素（包含块）
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>offsetParent</title>
    <style>
        #outer{
            width: 500px;
            height: 500px;
            margin: 50px;
            overflow: hidden;
            background-color: red;
            padding: 10px;
            border: 1px solid #000;
            position: relative;
        }
        #inner{
            width: 300px;
            height: 300px;
            background-color: yellow;
            margin: 20px;
            padding: 10px;
            border: 1px solid #ccc;
            position: relative;

        }
        #con{
            width: 100px;
            height: 100px;
            margin: 10px;
            /*position: absolute;*/
            /*left: 40px;*/
            /*top: 40px;*/
            background-color: #0ee69c;
        }
    </style>
</head>
<body>
<div id="outer">
    <div id="inner">
        <div id="con"></div>
    </div>
</div>
<script>
    var oCon = document.getElementById("con");
    console.log(oCon.offsetParent);
</script>
</body>
</html>

scrollLeft和scrollTop

  • 使用scrollLeft和scrollTop可以读写 移出可视区域外面的宽度和高度
  • scrollLeft：读写元素左侧已经滚过的距离
  • scrollTop：读写元素顶部已滚动的距离
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>scrollLeft和scrollTop</title>
    <style>
        #outer{
            width: 200px;
            height: 200px;
            border: 1px solid #000;
            overflow: auto;
        }
        #con{
            width: 2000px;
            height: 2000px;
            background-color: pink;
        }
    </style>
</head>
<body>
<button id="btn">点一哈</button>
<div id="outer">
    <div id="con"></div>
</div>
<script>
    var oOuter = document.getElementById("outer");
    var oBtn = document.getElementById("btn");
    oBtn.onclick = function () {
        // oOuter.scrollLeft = 200;
        console.log(oOuter.scrollLeft);
    }

</script>
</body>
</html>

clientLeft和clientTop

  • 边框的大小
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>设计位置-clientLeft和clientTop</title>
    <style>
        #outer{
            width: 500px;
            height: 500px;
            margin: 50px;
            overflow: hidden;
            background-color: red;
            padding: 10px;
            border: 1px solid #000;
            position: relative;
        }
        #inner{
            width: 300px;
            height: 300px;
            background-color: yellow;
            margin: 20px;
            padding: 10px;
            border: 1px solid #ccc;
            /*position: relative;*/

        }
        #con{
            width: 100px;
            height: 100px;
            margin: 10px;
            /*position: absolute;*/
            /*left: 40px;*/
            /*top: 40px;*/
            background-color: #0ee69c;
        }
    </style>
</head>
<body>
<div id="outer">
    <div id="inner">
        <div id="con"></div>
    </div>
</div>
<script>
    var oCon = document.getElementById("con");
    console.log(oCon.clientLeft);
    console.log(oCon.parentNode.clientLeft);
    console.log(oCon.parentNode.parentNode.clientLeft);
</script>
</body>
</html>

系统滚动条位置

获取系统滚动条位置

function getPS (){
    var h = document.documentElement;
    var x = self.pageXOffset||
            (h && h.scrollLeft)||
            document.body.scrollLeft;
    var y = self.pageYOffset||
            (h && h.scrollTop)||
            document.body.scrollTop;
    return {
        x:x,
        y:y
    }

}

设置系统滚动条位置

  • 使用window对象的scrollTo(x,y)方法可以定位滚动条的位置

  • 其中参数x可以定位页面内容在x轴方向上的偏移量。

function setWinScroll(n,m) {
    if (typeof m != "undefined" && typeof m =="number") {
        document.documentElement.scrollTop = m;
        document.body.scrollTop =m
    }
    if (typeof n != "undefined" && typeof n =="number") {
        document.documentElement.scrollLeft = n;
        document.body.scrollLeft = n;
    }
}

//或者：
window.scrollTo(0,300);

获取整个文档全文的宽高

function getDocSize() {
    return {
        height:document.documentElement.offsetHeight || document.body.offsetHeight,
        width:document.documentElement.offsetWidth || document.body.offsetWidth
    }
}

封装my.js

;+function (w) {
    /*如果没有加号，解析器会认为function是一个函数声明的开始。在后边直接添加（）调用时错误的语法
    如果加上一个+号，就变成了一个函数表达式，后边添加（），就变成了立即执行函数*/
    // 当然波浪号和加号一个作用
    w.my = {};

    /**
     * getWinScroll获取系统滚动条滚过去的距离 函数
     * @param {} 
     * @return {object} 对象中left和top保存获取的值
     */
    w.my.getWinScroll = function () {
        return {
            left:document.documentElement.scrollLeft||document.body.scrollLeft||window.pageXOffset,
            top:document.documentElement.scrollTop||document.body.scrollTop||window.pageYOffset
        }
    }
}(window);

getBoundingClientRect

  • obj.getBoundingClientRect用于获取某个元素相对于视窗的位置集合。集合中有top, right, bottom, left等属性
  • rectObject.top：元素上边到视窗上边的距离;
  • rectObject.right：元素右边到视窗左边的距离;
  • rectObject.bottom：元素下边到视窗上边的距离;
  • rectObject.left：元素左边到视窗左边的距离;
  • ie9以上支持width/height属性。
posted @   z_bky  阅读(23)  评论(0)  编辑  收藏  举报
相关博文：
·  CSS基础样式设置
·  CSS其他
·  获取元素大小、偏移量及鼠标位置
·  js脚本化css
·  建议收藏： jq 获取各个元素的宽度高度的方法
阅读排行：
· 分享一个免费、快速、无限量使用的满血 DeepSeek R1 模型，支持深度思考和联网搜索！
· 25岁的心里话
· 基于 Docker 搭建 FRP 内网穿透开源项目（很简单哒）
· ollama系列01：轻松3步本地部署deepseek，普通电脑可用
· 按钮权限的设计及实现
点击右上角即可分享
微信分享提示