获取元素宽度的一个简单疑问解决办法
日期：2014-05-16 浏览次数：20484 次
获取元素宽度的一个简单疑问
代码如果这么写，我们可以很正常的获取到div1元素的宽度
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script type="text/javascript">
function divwidth() {
var width = document.getElementById("div1").style.width;
alert(width);
}
</script>
</head>
<body >
<div id="div1" style="width:300px;height:500px;border:1px solid black"></div><br />
<input type="button" onclick="divwidth()" />
</body>
</html>
但是代码如果像下面这么写，我们就无法获取到div1元素的宽度，我想问问为什么
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
#div1
{
width:300px;
height:500px;
border:1px solid black;
}
</style>
<script type="text/javascript">
function divwidth() {
var width = document.getElementById("div1").style.width;
alert(width);
}
</script>
</head>
<body >
<div id="div1" ></div><br />
<input type="button" onclick="divwidth()" />
</body>
</html>
有劳各位大哥多多指教
------解决方案--------------------
代码如果这么写，我们可以很正常的获取到div1元素的宽度
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script type="text/javascript">
function divwidth() {
var width = document.getElementById("div1").style.width;
alert(width);
}
</script>
</head>
<body >
<div id="div1" style="width:300px;height:500px;border:1px solid black"></div><br />
<input type="button" onclick="divwidth()" />
</body>
</html>
但是代码如果像下面这么写，我们就无法获取到div1元素的宽度，我想问问为什么
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
#div1
{
width:300px;
height:500px;
border:1px solid black;
}
</style>
<script type="text/javascript">
function divwidth() {
var width = document.getElementById("div1").style.width;
alert(width);
}
</script>
</head>
<body >
<div id="div1" ></div><br />
<input type="button" onclick="divwidth()" />
</body>
</html>
有劳各位大哥多多指教
------解决方案--------------------
- HTML code
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
#div1
{
width:300px;
height:500px;
border:1px solid black;
}
</style>
<script type="text/javascript">
function getCss(obj, attr){
return obj.currentStyle? obj.currentStyle[attr] : getComputedStyle(obj, null)[attr];
}
function divwidth() {
//var width = document.getElementById("div1").style.width; 这样是获取行内styel
//获取css里值这样写
var obj = document.getElementById("div1");
alert(getCss(obj, 'width'));
}
</script>
</head>
<body >
<div id="div1" ></div><br />
<input type="button" onclick="divwidth()" />
</body>
</html>
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
