JavaScript 怎么获取元素的宽度 ？
比如有一个DIV，在样式中设定宽度为“80%”，但是获取无论怎么获取到的都是“xxxPX”而不是“80%”，求解怎么才能获取到“80%”？
.
或者是，在样式中设定为“auto”，怎么获取这个“auto”？
javascriptè·åå
ç´ çé«åº¦ï¼
var obj = document.getElementById("test");
alert(obj.height + "\n" + obj.width);
// 200px 200px typeof=stringåªæ¯å°styleå±æ§ä¸çå¼æ¾ç¤ºåºæ¥
æ©å±ï¼
è·åå ç´ çå®é 大å°
clientWidthåclientHeight
è¿ç»å±æ§å¯ä»¥è·åå ç´ å¯è§åºç大å°ï¼å¯ä»¥å¾å°å ç´ å 容åå è¾¹è·æå æ®ç空é´å¤§å°ãè¿åäºå ç´ å¤§å°ï¼ä½æ²¡æåä½ï¼é»è®¤åä½æ¯pxï¼å¦æä½ å¼ºè¡è®¾ç½®äºåä½ï¼æ¯å¦100emä¹ç±»ï¼å®è¿æ¯ä¼è¿åpxç大å°ã(CSSè·åçè¯ï¼æ¯ç §çä½ è®¾ç½®çæ ·å¼è·å)ã对äºå ç´ çå®é 大å°ï¼clientWidthåclientHeightç解æ¹å¼å¦ä¸ï¼
a. å¢å è¾¹æ¡ï¼æ ååï¼
b. å¢å å¤è¾¹è·ï¼æ ååï¼
c. å¢å æ»å¨æ¡ï¼æç»å¼çäºåæ¬å¤§å°åå»æ»å¨æ¡ç大å°ï¼
d. å¢å å è¾¹è·ï¼æç»å¼çäºåæ¬å¤§å°å ä¸å è¾¹è·ç大å°ï¼
var obj = document.getElementById("test");
alert(obj.height + "\n" + obj.width);
// 200px 200px typeof=stringåªæ¯å°styleå±æ§ä¸çå¼æ¾ç¤ºåºæ¥
æ©å±ï¼
è·åå ç´ çå®é 大å°
clientWidthåclientHeight
è¿ç»å±æ§å¯ä»¥è·åå ç´ å¯è§åºç大å°ï¼å¯ä»¥å¾å°å ç´ å 容åå è¾¹è·æå æ®ç空é´å¤§å°ãè¿åäºå ç´ å¤§å°ï¼ä½æ²¡æåä½ï¼é»è®¤åä½æ¯pxï¼å¦æä½ å¼ºè¡è®¾ç½®äºåä½ï¼æ¯å¦100emä¹ç±»ï¼å®è¿æ¯ä¼è¿åpxç大å°ã(CSSè·åçè¯ï¼æ¯ç §çä½ è®¾ç½®çæ ·å¼è·å)ã对äºå ç´ çå®é 大å°ï¼clientWidthåclientHeightç解æ¹å¼å¦ä¸ï¼
a. å¢å è¾¹æ¡ï¼æ ååï¼
b. å¢å å¤è¾¹è·ï¼æ ååï¼
c. å¢å æ»å¨æ¡ï¼æç»å¼çäºåæ¬å¤§å°åå»æ»å¨æ¡ç大å°ï¼
d. å¢å å è¾¹è·ï¼æç»å¼çäºåæ¬å¤§å°å ä¸å è¾¹è·ç大å°ï¼
温馨提示：内容为网友见解，仅供参考
第1个回答 推荐于2017-09-26
js都会将%转成具体的像素值。如果你需要获取具体的%。可以这样：
var _divwidth=$('#div').width();//获取元素的宽度var _width=$('body').width();//获取窗体的宽度
var width_bfb=(_divwidth/_width)*100+"%";//转换本回答被提问者和网友采纳
第2个回答 2015-08-05
<style type="text/css">
#aaa {height:200px;width:80%;background:aqua}
</style>
<script>
window.onload=function(){
var a=document.getElementById('aaa');
alert(a.offsetWidth); //获得div的宽度
alert(a.offsetHeight); //获得div的高度
}
</script>
<div id="aaa">
asdfasfkdjk
</div>
#aaa {height:200px;width:80%;background:aqua}
</style>
<script>
window.onload=function(){
var a=document.getElementById('aaa');
alert(a.offsetWidth); //获得div的宽度
alert(a.offsetHeight); //获得div的高度
}
</script>
<div id="aaa">
asdfasfkdjk
</div>
第3个回答 推荐于2018-02-27
假设，有如下 html 代码：
<!DOCTYPE html><html>
<body>
<div id="divTest" style="width:80%; background-color:#06F">
<h1>我的第一段 JavaScript</h1>
<p id="demo">
JavaScript 能改变 HTML 元素的内容。
</p>
</div>
<button type="button" onclick="myFunction()">点击这里</button>
</body>
</html>
则获取 div 元素的 百分比 宽度代码如下：
<script>function myFunction()
{
x=document.getElementById("divTest"); // 找到元素
alert(x.style.width); //获取style中的width
}
</script>
效果如图：
第4个回答 2015-08-05
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>
RunJS 演示代码
</title>
<style>
div{
border:1px solid black;
}
#div1{
width:40%;
}
</style>
<script>
onload=function(){
console.log(div1.offsetWidth);
console.log(parseInt(div1.offsetWidth*100/document.body.offsetWidth) + "%");
}
</script>
</head>
<body>
<div id="div1">
div1
</div>
</body>
</html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>
RunJS 演示代码
</title>
<style>
div{
border:1px solid black;
}
#div1{
width:40%;
}
</style>
<script>
onload=function(){
console.log(div1.offsetWidth);
console.log(parseInt(div1.offsetWidth*100/document.body.offsetWidth) + "%");
}
</script>
</head>
<body>
<div id="div1">
div1
</div>
</body>
</html>
相似回答
