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相關的資料

友情鏈接