offsetLeft到浏览器边用回溯替代的方法

最新推荐文章于 2023-06-05 11:03:45 发布

aswind7

最新推荐文章于 2023-06-05 11:03:45 发布

阅读量427

点赞数

分类专栏：原生js

本文链接：https://blog.csdn.net/sqfbeijing/article/details/49036235

版权

原生js 专栏收录该内容

16 篇文章 0 订阅

订阅专栏

高程有错。
html代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <!-- <meta http-equiv="X-UA-Compatible" content="IE=7"> -->
    <style>
        body {
            font-size: 12px;
        }
        #testId {
            color: white;
            width: 100px;
            height: 100px;
            background: gray;
            border: 10px solid red;
            border-width: 10px;
            margin: 10px;
            padding: 10px;
        }
        .outer {
            /*若注释掉下面这一行，会有不同效果哦*/
            position: relative; 
            border: 10px solid blue;
            margin: 50px;
            width: 400px;
            height: 400px;
            background: yellow;
            padding: 20px;
        }
    </style>
</head>
<body style="border-width: 0px;">
    <div class="outer" style="border-width: 10px;">
        <div id="testId" data-sqf="hei" style="border-width: 10px;">
            <p></p>
            我的宽高是100px,padding是10px,border是10px,margin是10px;
        </div>
        我的宽高400px,margin 50px,border 10px ,padding 20px
    </div>

<script src="a.js"></script>
</body>
</html>

外部a.js的代码:

var oDiv = document.querySelector("#testId");
// http://codepen.io/sqf/pen/NGgmzM
function a(o){
    var aa = o.offsetLeft;
    var p = o.offsetParent;
    while (p !== null){
        // console.log(typeof parseInt(p.style.borderWidth))
            console.log(aa);
        aa = aa + p.offsetLeft + parseInt(p.style.borderWidth);
        p = p.offsetParent;
    }
    return aa;
}
alert(a(oDiv));
alert(oDiv.offsetLeft);

aswind7

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
offsetLeft到浏览器边用回溯替代的方法

高程有错。 html代码:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title>  <style> body {
复制链接

扫一扫