1.div里面包裹text
HTML:
<div class="outerdiv">
BEIJING - A new round of smog is likely to hit Beijing and neighboring regions Saturday night and will stay for at least four days, the local weather bureau said Saturday.......
</div>
CSS:
*{
margin:0;
padding:0;
}
.outerdiv{
overflow: scroll;
border:1px solid #DDD;
width:300px;
height:300px;
margin:100px 50px;
font-size: 10pt;
}
JS:
var eldiv=document.getElementsByClassName("outerdiv")[0];
console.log('clientWidth: '+eldiv.clientWidth);
console.log('offsetWidth: '+eldiv.offsetWidth);
console.log('scrollWidth: '+eldiv.scrollWidth);
console.log('clientTop: '+eldiv.clientTop);
console.log('offsetTop: '+eldiv.offsetTop);
console.log('scrollTop: '+eldiv.scrollTop);
console.log('clientLeft: '+eldiv.clientLeft);
console.log('offsetLeft: '+eldiv.offsetLeft);
console.log('scrollLeft: '+eldiv.scrollLeft);
结果:
FireFox & Chrome & IE
结论: clientWidth与scrollWidth 仅仅指内容宽度,不包括滚动条和边框。 offsetWidth指内容+滚动条+边框 宽度。offsetTop与offsetLeft指边框到父元素的距离,本例子中与 margin值相同。clientTop与clientLeft与border宽度相同。scrollTop与scrollLeft与滚动条上下或左右滚动的宽度大小相同。
2. outerdiv包裹innerdiv,innerdiv包裹text
HTML:
<div class="outerdiv">
<div class="innerdiv">
BEIJING - A new round of smog is likely to hit Beijing and neighboring regions Saturday night and will stay for at least four days, the local weather bureau said Saturday.......
</div>
</div>
CSS:
*{
margin:0;
padding:0;
}
.outerdiv{
overflow: scroll;
border:1px solid #DDD;
width:300px;
height:300px;
margin:100px 50px;
font-size: 10pt;
}
.innerdiv{
width:500px;
height:500px;
}
JS:
<script>
var eldiv=document.getElementsByClassName("outerdiv")[0];
var txdiv=document.getElementsByClassName("innerdiv")[0];
console.log('outer div');
console.log('clientWidth: '+eldiv.clientWidth);
console.log('offsetWidth: '+eldiv.offsetWidth);
console.log('scrollWidth: '+eldiv.scrollWidth);
console.log('clientTop: '+eldiv.clientTop);
console.log('offsetTop: '+eldiv.offsetTop);
console.log('scrollTop: '+eldiv.scrollTop);
console.log('clientLeft: '+eldiv.clientLeft);
console.log('offsetLeft: '+eldiv.offsetLeft);
console.log('scrollLeft: '+eldiv.scrollLeft);
console.log('inner div');
console.log('clientWidth: '+txdiv.clientWidth);
console.log('offsetWidth: '+txdiv.offsetWidth);
console.log('scrollWidth: '+txdiv.scrollWidth);
console.log('clientTop: '+txdiv.clientTop);
console.log('offsetTop: '+txdiv.offsetTop);
console.log('scrollTop: '+txdiv.scrollTop);
console.log('clientLeft: '+txdiv.clientLeft);
console.log('offsetLeft: '+txdiv.offsetLeft);
console.log('scrollLeft: '+txdiv.scrollLeft);
</script>
结果:
outer div各项值与1中结果相同