0
点赞
收藏
分享

微信扫一扫

style.width、clientWidth、offsetWidth

胡桑_b06e 2022-04-13 阅读 73
css3

先演示再说结论:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <style>
        #box1{
            width: 100px;
            height: 100px;
            background-color: coral; 
            padding:10px;
            border:10px red solid;
       }
    </style>
    <script>
        window.onload = function(){
            var box1 = document.getElementById("box1");
            alert("hello");
            console.log(box1.style.width);
            console.log(box1.clientWidth);
            console.log(box1.offsetWidth);
            console.log(box1.width);
        }
    </script>
</head>
<body>
    <div id="box1" style="width: 100px;height: 100px;"></div>
    
</body>
</html>

输出:
在这里插入图片描述
说明如下内容,三个属性表示的位置:
在这里插入图片描述
即:
style.width = content的width
clientWidth = width + padding-left + padding-right
offsetWidth = width + padding-left + padding-right +border-left +border-right

举报

相关推荐

0 条评论