js获取宽度padding_js获取table中的td宽度并赋值到另一个table的td中实现宽度对齐

① JQ获取高度会忽略padding值吗

jquery.height() 获取的是元素实际设置的高度(不包括 padding 内边距);
jquery.innerHeight() 获取的是元素最终的高度(包括 padding 内边距);

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

1、clientWidth / clintHeight
clientWidth = 元素的宽度 + 元素的paddingLeft + 元素的paddingRight
clientHeight = 元素的高度 + 元素的paddingTop + 元素的paddingBottom
注意：如果该元素上存在上下滑动滚动条，则clientWidth的值不包括滚动条所占的宽度（即获得的clientWidth已经减去了滚动条的宽度）
注意：如果该元素上存在左右滑动滚动条，则clientHeight的值不包括滚动条所占的宽度（即获得的clientHeight已经减去了滚动条的高度）
2、clientTop / clientLeft
clientTop - 可视区域的上边距距离自身上边框的外边框的距离（即为上边框的宽度）
clientLeft - 可视区域的左边距距离自身左边框的外边框的距离（即为左边框的宽度）
没有滑动条的效果代码如下：
[html] view plain
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>获取元素的高度和宽度</title>
<style type="text/css">
#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 id="wrap">
<div id="content"></div>
</div>
</body>
<script type="text/javascript">
//获取content对象
var contentObj = document.getElementById("content");
console.log(contentObj.clientHeight);
console.log(contentObj.clientWidth);
</script>
</html>
以上结果输出的即为id为content的div的clientHeight 和 clientWidth 分别为 211 = height(200) + paddingTop(5) + paddingBottom(6)
有滚动条的代码如下,
在content div的里面添加一个id为one的div让新添加的div超出隐藏即可出现滚动条
[html] view plain
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>获取元素的高度和宽度</title>
<style type="text/css">
#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 id="wrap">
<div id="content">
<div id="one"></div>
</div>
</div>
</body>
<script type="text/javascript">
//获取content对象
var contentObj = document.getElementById("content");
console.log(contentObj.clientHeight);
console.log(contentObj.clientWidth);
console.log(contentObj.clientTop);
console.log(contentObj.clientLeft);
</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
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>获取元素的高度和宽度</title>
<style type="text/css">
#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 id="wrap">
<div id="content">
<div id="one"></div>
</div>
</div>
</body>
<script type="text/javascript">
//获取content对象
var contentObj = document.getElementById("content");
console.log(contentObj.offsetHeight);
console.log(contentObj.offsetWidth);
console.log(contentObj.offsetLeft);
console.log(contentObj.offsetTop);
</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 元素滚动的距离

③ javascript 获得padding的值，求助~~~~~

<body>
	<divstyle="width:100px;height:100px;background:#ccc;padding-left:20px;"
</body>
<scripttype="text/javascript">
	varoDiv=document.getElementsByTagName('div')[0];
	console.log(oDiv.offsetWidth-parseInt(oDiv.style.width));
</script>

④ JS和jquery获取各种屏幕的宽度和高度

Javascript:
网页可见区域宽：
document.body.clientWidth
网页可见区域高：
document.body.clientHeight
网页可见区域宽：
document.body.offsetWidth
(包括边线的宽)
网页可见区域高：
document.body.offsetHeight
(包括边线的高)
网页正文全文宽：
document.body.scrollWidth
网页正文全文高：
document.body.scrollHeight
网页被卷去的高：
document.body.scrollTop
网页被卷去的左：
document.body.scrollLeft
网页正文部分上：
window.screenTop
网页正文部分左：
window.screenLeft
屏幕分辨率的高：
window.screen.height
屏幕分辨率的宽：
window.screen.width
屏幕可用工作区高度：
window.screen.availHeight
屏幕可用工作区宽度：
window.screen.availWidth
JQuery:
$(document).ready(function(){
alert($(window).height());
//浏览器当前窗口可视区域高度
alert($(document).height());
//浏览器当前窗口文档的高度
alert($(document.body).height());//浏览器当前窗口文档body的高度
alert($(document.body).outerHeight(true));//浏览器当前窗口文档body的总高度
包括border
padding
margin
alert($(window).width());
//浏览器当前窗口可视区域宽度
alert($(document).width());//浏览器当前窗口文档对象宽度
alert($(document.body).width());//浏览器当前窗口文档body的宽度
alert($(document.body).outerWidth(true));//浏览器当前窗口文档body的总宽度
包括border
padding
margin
})

⑤ js如何获得style 属性的 padding-left 值（最好兼容火狐和chrome）高手来

您好！很高兴为您答疑！

正确的是：style.paddingLeft没有“-”。
您可以在火狐社区了解更多内容。希望我的回答对您有所帮助，如有疑问，欢迎继续在本平台咨询。

⑥ js里面如果获取了一个li数组怎样获取它每个li的宽度

可以，
但是offsetWidth 获取的是盒子宽度，就是说 offsetWidth获取出来的值包括 padding的值，border的值，和你设置的宽度值。

⑦ js获取table中的td宽度并赋值到另一个table的td中，实现宽度对齐

给你说下思路，
document.getElementById("top").rows.length可以获得top表的行数
document.getElementById("top").rows[0].cells.length可以获得top表的第一行的列版数
document.getElementById("top").rows[0].cells[0].offsetWidth可获得top表第一行第一列权的实际宽度，（注意，这个是只读的！）

所以
for(var i=0;i<document.getElementById("top").rows[0].cells.length;i++)
{
document.getElementById("buttom").rows[0].cells[i].width=document.getElementById("top").rows[0].cells[i].offsetWidth;
}
希望对你有帮助！

⑧ 纯js如何获取一个在样式中没有定义宽度的div的宽度

⑨ 怎麽用javascript计算一段文字的宽度

<div class="a">文字写入其中</div>

<script>
$(function(){
$(".a").width();//div保证padding,margin,字间距等都为零。然后计算这个容器宽度即可。
});
</script>

⑩ javascript 获取宽度，然后再css中使用的问题

<script>
window.onload=function(){
//把屏幕宽度赋值给该元素
document.getElementById("float_banner").style.width=window.screen.width+'px';
}
</script>

的却，在css代码页可以执行js代码，但是，不建议这样做

导航:首页 > 编程语言 > js获取宽度padding

js获取宽度padding

与js获取宽度padding相关的资料

友情链接