JS中几种获取对象宽度和高度的区别_框架

1、clientWidth / clintHeight

clientWidth = 元素的宽度 + 元素的paddingLeft + 元素的paddingRight

clientHeight = 元素的高度 + 元素的paddingTop + 元素的paddingBottom

注意：如果该元素上存在上下滑动滚动条，则clientWidth的值不包括滚动条所占的宽度（即获得的clientWidth已经减去了滚动条的宽度）

注意：如果该元素上存在左右滑动滚动条，则clientHeight的值不包括滚动条所占的宽度（即获得的clientHeight已经减去了滚动条的高度）

2、clientTop / clientLeft

clientTop - 可视区域的上边距距离自身上边框的外边框的距离（即为上边框的宽度）

clientLeft - 可视区域的左边距距离自身左边框的外边框的距离（即为左边框的宽度）

没有滑动条的效果代码如下：

[html] view plain copy

<!DOCTYPE html>

<html>

<head>

<title>获取元素的高度和宽度</title>

#wrap{

height: 500px;

width: 500px;

background-color: skyblue;

margin: 0 auto;

border: 3px solid red;

overflow: scroll;

}

#content{

height: 200px;

width: 200px;

background-color: greenyellow;

margin: 0 auto;

border: 0px solid yellow;

border-width: 5px 6px 8px 12px;

padding: 5px 4px 6px 12px;

margin-top: 50px;

}

</style>

</head>

<body>

</div>

</body>

//获取content对象

var contentObj = documentgetElementById("content");

consolelog(contentObjclientHeight);

consolelog(contentObjclientWidth);

</script>

</html>

以上结果输出的即为id为content的div的clientHeight 和 clientWidth 分别为 211 = height(200) + paddingTop(5) + paddingBottom(6)

有滚动条的代码如下,

在content div的里面添加一个id为one的div让新添加的div超出隐藏即可出现滚动条

[html] view plain copy

<!DOCTYPE html>

<html>

<head>

<title>获取元素的高度和宽度</title>

#wrap{

height: 500px;

width: 500px;

background-color: skyblue;

margin: 0 auto;

border: 3px solid red;

overflow: scroll;

padding: 5px;

}

#content{

height: 200px;

width: 200px;

background-color: greenyellow;

margin: 0 auto;

border: 0px solid yellow;

border-width: 5px 6px 8px 12px;

padding: 5px 4px 6px 12px;

margin-top: 50px;

overflow: scroll;

}

#one{

height: 300px;

width: 300px;

}

</style>

</head>

<body>

</div>

</body>

//获取content对象

var contentObj = documentgetElementById("content");

consolelog(contentObjclientHeight);

consolelog(contentObjclientWidth);

consolelog(contentObjclientTop);

consolelog(contentObjclientLeft);

</script>

</html>

最后输出的结果为clientHeight 和 clientWidth分别为 196 = height(200) + paddingTop(5) + paddingBottom(6) - 滚动条的宽度(15)

201 = width(200) + paddingLeft(12) + paddingRight(4) - 滚动条的宽度(15)

3、offsetHeight / offsetWidth

offsetHeight / offsetWidth实际上获取的内容和clientHeight / clientWidth的差别在于，offsetHeight和offsetWidth 不仅包括元素的高度和宽度和padding的值，而且包括border的宽度

注意：offsetHeight / offsetWidth包括滚动条的宽度（这一点与clientHeight / clientWidth）不同

[html] view plain copy

<!DOCTYPE html>

<html>

<head>

<title>获取元素的高度和宽度</title>

#wrap{

height: 500px;

width: 500px;

background-color: skyblue;

margin: 0 auto;

border: 3px solid red;

overflow: scroll;

padding: 5px;

}

#content{

height: 200px;

width: 200px;

background-color: greenyellow;

margin: 0 auto;

border: 0px solid yellow;

border-width: 5px 6px 8px 12px;

padding: 5px 4px 6px 12px;

margin-top: 50px;

overflow: scroll;

}

#one{

height: 300px;

width: 300px;

}

</style>

</head>

<body>

</div>

</body>

//获取content对象

var contentObj = documentgetElementById("content");

consolelog(contentObjoffsetHeight);

consolelog(contentObjoffsetWidth);

consolelog(contentObjoffsetLeft);

consolelog(contentObjoffsetTop);

</script>

</html>

输出的结果：offsetHeight = height(200) + paddingTop(5) + paddingBottom(6) + borderTop(5) + borderBottom(8)

offsetWidth = width(200) + paddingLeft(12) + paddingRight(4) + borderLeft(12) + borderRight(6)

4、offsetTop / offsetLeft

offsetTop - 该元素的上边框的外边缘距离父级元素上边框的内边缘的距离

offsetLeft - 该元素的左边框的外边缘距离父级元素左边框的内边缘的距离

5、scrollHeight / scrollWidth

scrollHeight = 子级超出父级的元素的高度 + 父级的上下padding值

scrollWidth = 子级超出父级的元素的宽度 + 父级的左padding

6、scrollTop

scrollTop 元素滚动的距离

在css中使用margin可以将margin-top, margin-bottom, margin-left, margin-right缩写为一个标记。margin标记可以带一个、二个、三个、四个参数，各有不同的含义。[示例代码]<html><body><div style="border: 1px solid red;">

margin: 20px;上、下、左、右各20px。

</div></div><div style="border: 1px solid red;">

margin: 20px 40px;上、下20px；左、右40px。

</div></div><div style="border: 1px solid red;">

margin: 20px 40px 60px;上20px；左、右40px；下60px。

</div></div><div style="border: 1px solid red;">

<!doctype html>

<html>

<head>

<title>无标题文档</title>

<!--

var MaxLeft = 1000; //最大边距值

var Stepping = 100; //步进边距值

/上面的值可以改动，下面的代码就不要改了/

var Margin = 0; //原边距

$ = function( id ) { return documentgetElementById( id );}

windowonload = function() {

$('a')onclick = function(){

Margin = parseInt( $('b')styleleft ); //取得B元素当前左边距

if ( Margin >= MaxLeft ) { //如果当前边距大于等于设定的最大边距

$('b')styleleft = '0px'; //设置左边距为0

$('view')innerHTML = 0; //这个只是个显示作用，可以删除

} else { //否则

$('b')styleleft = (Margin + Stepping) + 'px'; //给原边距加上设定的步进值

$('view')innerHTML = (Margin + Stepping); //这个只是个显示作用，可以删除

}

};

//-->

</script>

</head>

<body>

</body>

</html>

经过测试，在ie12、 360极速和兼容模式下都正常运行，其他浏览器就不知道了，没有测试！

1JS方法：

var va = documentgetElementById("d1")childNodes;

for(var i=0;i<valength;i++){

if(va[i]nodeNametoLocaleUpperCase() == "A"){

alert("JS: "+va[i]attributes["linkId"]nodeValue);

}

};

</script>

2 Jquery方法：

$(document)ready(function(){

$("#d1 a")each(function(){

alert("Jquery: "+$(this)attr("linkId"));

});

</script>

JS 获取HTML标签内的子节点的方法

子节点的个数：

documentgetElementById("id")childNodeslength

注意：标签开/闭合算2个节点第几个子几点：

documentgetElementById("id")childNodes[n]

示例：

这里是 length-4 处，margin-left：20px

输出：length=8

实例：

<div id="page_kx" style="text-align: center;" class="tac"> <span class="fy2">1</span> <a href="#">2</a> <a href="#">3</a> <a href="#">4</a> <a href="#">5</a> <a href="#">下一页</a> <a href="#">末页</a> </div> <script> var gor=documentgetElementById("page_kx"); var gorL=Number(gorchildNodeslength)-4; gorchildNodes[gorL]stylemargin="0 0 0 20px"; </script>

这个太简单了吧，先设置父元素，overflow：hidden;

收起的时候，height：0；

点开的时候 height：auto；

另外最好不要用绝对定位，这样会让布局更麻烦

哦，补充一下，如果还有爷爷级的话同样要给设置overflow：hidden;

应为这样才能形成BFC（块级格式化上下文）

不然的话会撑不开

以上就是关于JS中几种获取对象宽度和高度的区别全部的内容，包括:JS中几种获取对象宽度和高度的区别、如何用JavaScript设置Div的margin参数、求js代码，单击a元素之后获取b元素左边距，然后使b元素左边距等于原本边距加上100px,麻烦给完整些的答案等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！

欢迎分享，转载请注明来源：内存溢出

原文地址:https://54852.com/web/9310954.html

JS中几种获取对象宽度和高度的区别

发表评论

评论列表（0条）