JavaScript 怎么获取元素的宽度 ？
比如有一个DIV，在样式中设定宽度为“80%”，但是获取无论怎么获取到的都是“xxxPX”而不是“80%”，求解怎么才能获取到“80%”？.或者是，在样式中设定为“aut...
比如有一个DIV，在样式中设定宽度为“80%”，但是获取无论怎么获取到的都是“xxxPX”而不是“80%”，求解怎么才能获取到“80%”？
.
或者是，在样式中设定为“auto”，怎么获取这个“auto”？ 展开
.
或者是，在样式中设定为“auto”，怎么获取这个“auto”？ 展开
6个回答
2016-02-18 · 百度知道合伙人官方认证企业
育知同创教育
1【专注：Python+人工智能|Java大数据|HTML5培训】 2【免费提供名师直播课堂、公开课及视频教程】 3【地址：北京市昌平区三旗百汇物美大卖场2层，微信公众号：yuzhitc】
向TA提问
关注
![]()
展开全部
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. 增加内边距，最终值等于原本大小加上内边距的大小；
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
js都会将%转成具体的像素值。如果你需要获取具体的%。可以这样：
var _divwidth=$('#div').width();//获取元素的宽度
var _width=$('body').width();//获取窗体的宽度
var width_bfb=(_divwidth/_width)*100+"%";//转换
本回答被提问者和网友采纳
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
<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>
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
假设，有如下 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>
效果如图：
本回答被网友采纳
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
<!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>
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
更多回答（4）
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
