JavaScript的DOM操作获取元素实际大小

clientWidth 和 clientHeight　

　　这组属性可以获取元素可视区的大小，可以得到元素内容及内边距所占据的空间大小。

　　返回了元素大小，但没有单位，默认单位是 px，如果你强行设置了单位，比如 100em之类，它还是会返回 px 的大小。(CSS 获取的话，是照着你设置的样式获取)。

<script type="text/javascript">
    window.onload = function(){
        var box = document.getElementById("box");
        alert(box.clientWidth); //200
        alert(box.clientHeight); //200
    }
</script>
<style type="text/css">
    .aaa{
        background:#ccc;
        200px;
        height:200px;
    }
</style>
</head>
<body>
    <div >测试Div</div>
</body>

　　对于元素的实际大小，clientWidth 和 clientHeight 理解方式如下：
　　　　1.增加边框，无变化，为 200；
　　　　2.增加外边距，无变化，为 200；
　　　　3.增加滚动条，最终值等于原本大小减去滚动条的大小，为 184；
　　　　4.增加内边距，最终值等于原本大小加上内边距的大小，为 220；

　　如果说没有设置任何 CSS 的宽和高度， IE 6,7,8浏览器则返回 0。那么其他浏览器会算上滚动条和内边距的计算后的大小。

<script type="text/javascript">
    window.onload = function(){
        var box = document.getElementById("box");
        alert(box.clientWidth); //220            加上了内边距
        alert(box.clientHeight); //220            加上了内边距    
    }
</script>
<style type="text/css">
    .aaa{
        background:#ccc;
        200px;
        height:200px;
        border:20px solid red;
        margin:30px;
        padding:10px;
    }
</style>
</head>
<body>
    <div >测试Div</div>
</body>

二、scrollWidth 和 scrollHeight　　

　　这组属性可以获取滚动内容的元素大小。

　　返回了元素大小，默认单位是 px。

<script type="text/javascript">
    window.onload = function(){
        var box = document.getElementById("box");
        alert(box.scrollWidth); //200
        alert(box.scrollWidth); //200
    }
</script>
<style type="text/css">
    .aaa{
        background:#ccc;
        200px;
        height:200px;
    }
</style>
</head>
<body>
    <div >测试Div</div>
</body>

　　如果没有设置任何 CSS 的宽和高度，它会得到计算后的宽度和高度。

<script type="text/javascript">
    window.onload = function(){
        var box = document.getElementById("box");
        alert(box.scrollWidth);  //
        alert(box.scrollWidth);  //  
    }
</script>
<style type="text/css">
    .aaa{
        background:#ccc;
    }
</style>
</head>
<body>
    <div >测试Div</div>
</body>

　　对于元素的实际大小，scrollWidth 和 scrollHeight 理解如下:
　　　　1.增加边框，不同浏览器有不同解释：
　　　　　　a) Firefox 和 Opera 浏览器会增加边框的大小
　　　　　　b) IE、Chrome 和 Safari 浏览器会忽略边框大小
　　　　　　c) IE 浏览器只显示它本来内容的高度
　　　　2.增加内边距，最终值会等于原本大小加上内边距大小
　　　　3.增加滚动条，最终值会等于原本大小减去滚动条大小
　　　　4.增加外边据，无变化。
　　　　5.增加内容溢出，Firefox、Chrome 和 IE 获取实际内容高度，Opera 比前三个浏览器获取的高度偏小，Safari 比前三个浏览器获取的高度偏大。

三、offsetWidth 和 offsetHeight

　　这组属性可以返回元素实际大小，包含边框、内边距和滚动条。

<script type="text/javascript">
    window.onload = function(){
        var box = document.getElementById("box");
        alert(box.offsetWidth); //240
        alert(box.offsetHeight); //240
    } 
</script>
<style type="text/css">
    .aaa{
        background:#ccc;
        200px;
        height:200px;
        border:10px solid red;
        padding:10px;
    }
</style>
</head>
<body>
    <div >测试Div</div>
</body>

　　如果没有设置任何 CSS 的宽和高度，他会得到计算后的宽度和高度即默认的宽度和高度。

<script type="text/javascript">
    window.onload = function(){
        var box = document.getElementById("box");
        alert(box.offsetWidth); //1350
        alert(box.offsetHeight); //18，火狐20
    }
</script>
<style type="text/css">
    .aaa{
        background:#ccc;
    }
</style>
</head>
<body>
    <div >测试Div</div>
</body>

　　对于元素的实际大小，offsetWidth 和 offsetHeight 理解如下：

　　　　1.增加边框，最终值会等于原本大小加上边框大小，为 220；
　　　　2.增加内边距，最终值会等于原本大小加上内边距大小，为 220；
　　　　3.增加外边据，无变化；
　　　　4.增加滚动条，无变化，不会减小；

　　对于元素大小的获取，一般是块级(block)元素并且以设置了 CSS 大小的元素较为方便。如果是内联元素(inline)或者没有设置大小的元素就尤为麻烦

JavaScript的DOM操作获取元素实际大小

相关推荐