width，clientWidth，offsetWidth
生活随笔
收集整理的這篇文章主要介紹了
width，clientWidth，offsetWidth
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>無標題文檔</title>
<script>
window.onload = function() {
var oDiv = document.getElementById('div1');
/*
width height
style.width : 樣式寬
clientWidth : 可視區寬
offsetWidth : 占位寬
*/
alert( oDiv.style.width ); //100
alert( oDiv.clientWidth ); //樣式寬 + padding 120
alert( oDiv.offsetWidth ); //樣式寬 + padding + border 可視區寬 + 邊框 122
}
</script>
</head>
<body>
<div id="div1"></div>
</body>
</html>
height
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>無標題文檔</title>
<script>
window.onload = function() {
var oDiv = document.getElementById('div1');
/*
width height
style.height : 樣式高
clientHeight : 可視區高
offsetHeight : 占位高
*/
alert( oDiv.style.height ); //100
alert( oDiv.clientHeight ); //樣式高 + padding 120
alert( oDiv.offsetHeight ); //樣式高 + padding + border 可視區高 + 邊框 122
}
</script>
</head>
<body>
<div id="div1"></div>
</body>
</html>
總結
以上是生活随笔為你收集整理的width，clientWidth，offsetWidth的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 机器学习之 weka学习（五）示例用法
- 下一篇： 机器学习之 weka学习（六）最大内存