js offset系列属性

2021-12-01 09:31:25 阅读：175 来源： 互联网

标签：返回 style console log 父级 js offset offsetWidth 属性

offsetParent:返回该元素有定位的父级，如果父级都没有定位则返回body
offsetTop:返回元素相对父级（带有定位的父级）上方的偏移
offsetLeft:返回元素相对父级（带有定位的父级）左边框的偏移
offsetWidth:返回自身的宽度，包括padding、border、内容区，返回数值不带单位
offsetHeight:返回自身的高度，包括padding、border、内容区，返回数值不带单位
style.width 只能获取行内样式的数据，返回有单位，能用js修改数值
offsetWidth只能读不能改，返回无单位

注意：<style></style>要放在js代码前面，js中才能正确获取offset系列属性。如果style代码要放在js代码后面，需要使用 window.onload 等待资源加载完毕再执行js代码。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
        <div class="parent">
            <div class="child">child</div>
            <div id="style" style="width: 88px;height: 66px;background-color: #00FFFF;">
                test style
            </div>
        </div>
        
    </body>
    <script>
    window.onload = function(){
        /**
         * offsetParent:返回该元素有定位的父级，如果父级都没有定位则返回body
         * 
         * offsetTop:返回元素相对父级（带有定位的父级）上方的偏移
         * offsetLeft:返回元素相对父级（带有定位的父级）左边框的偏移
         * offsetWidth:返回自身的宽度，包括padding、border、内容区，返回数值不带单位
         * offsetHeight:返回自身的高度，包括padding、border、内容区，返回数值不带单位
         * 
         * style.width 只能获取行内样式的数据，返回有单位，能用js修改数值
         * offsetWidth只能读不能改，返回无单位
         * */
        var parent = document.querySelector(".parent");
        console.log("parentNode:",parent.parentNode);
        var child = document.querySelector(".child");
        console.log("offsetParent:", child.offsetParent);
        console.log("offsetTop:", child.offsetTop);
        console.log("offsetLeft:", child.offsetLeft);
        console.log("offsetWidth:", child.offsetWidth);
        console.log("offsetHeight:", child.offsetHeight);
        
        console.log("--------------------------------");
        var style = document.querySelector("#style");
        console.log("offsetWidth:",style.offsetWidth);
        console.log("style.width:",style.style.width);
        style.style.width = 111+"px";//这句生效，注意加单位
        console.log(style.style.width);
        style.offsetWidth = 222+"px";//这句不生效
        console.log(style.offsetWidth);
    }
    </script>

    <style>
        * {
            padding: 0;
            margin: 0;
        }

        .parent {
            position: relative;
            display: inline-block;
            width: 200px;
            height: 200px;
            margin: 50px;
            background-color: #008000;
        }

        .child {
            display: inline-block;
            position: absolute;
            width: 50px;
            height: 50px;
            margin: 10px;
            border: 5px solid yellow;
            background-color: red;
        }
        #style{
            position: absolute;
            bottom: 0;
            right: 0;
        }
    </style>
</html>

style和offsetWidth的区别：

style.width 只能获取行内样式的数据，返回有单位，能用js修改数值
offsetWidth只能读不能改，返回无单位

标签：返回,style,console,log,父级,js,offset,offsetWidth,属性
来源： https://www.cnblogs.com/sunshine233/p/15627484.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

js offset系列属性

style和offsetWidth的区别：