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

clientWidth 和 clientHeight　

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

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

<script type="text/javascript">

    window.onload = function(){

        var box = document.getElementById("box");

        alert(box.clientWidth); //

        alert(box.clientHeight); //

    }

</script>

<style type="text/css">

    .aaa{

        background:#ccc;

        width:200px;

        height:200px;

    }

</style>

</head>

<body>

    <div id="box" class="aaa">测试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;

        width:200px;

        height:200px;

        border:20px solid red;

        margin:30px;

        padding:10px;

    }

</style>

</head>

<body>

    <div id="box" class="aaa">测试Div</div>

</body>

二、scrollWidth 和 scrollHeight　　

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

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

<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;

        width:200px;

        height:200px;

    }

</style>

</head>

<body>

    <div id="box" class="aaa">测试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 id="box" class="aaa">测试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); //

        alert(box.offsetHeight); //

    }

</script>

<style type="text/css">

    .aaa{

        background:#ccc;

        width:200px;

        height:200px;

        border:10px solid red;

        padding:10px;

    }

</style>

</head>

<body>

    <div id="box" class="aaa">测试Div</div>

</body>

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

<script type="text/javascript">

    window.onload = function(){

        var box = document.getElementById("box");

        alert(box.offsetWidth); //

        alert(box.offsetHeight); //18，火狐20

    }

</script>

<style type="text/css">

    .aaa{

        background:#ccc;

    }

</style>

</head>

<body>

    <div id="box" class="aaa">测试Div</div>

</body>

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

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

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

巴特西

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

最新文章

热门文章