通过js获取width、height、padding、border、margin，返回值为undefined
问题描述：
通过
- element.style.widht;
- element.style.height;
- element.style.padding;
- element.style.border;
- element.style.margin;
对元素的相应属性进行访问，有时候返回值为undefined.
原因定位：
html的样式分为；内联样式、内部样式、外部样式，而通过上述方法只能获取内联样式设置的属性
内联样式测试
<!DOCTYPE html>
<html>
<head>
<title>前端学习</title>
<meta charset="utf-8">
</head>
<body>
<!--测试内联样式-->
<div style="width: 400px;
height: 300px;
padding: 30px;
border: 5px solid red;
margin: 20px;">
</div>
</body>
</html>
测试结果如下：
结论：
通过内联样式设置的width、height、padding、border、margin属性能通过js的element.style获取。
内部样式测试
<!DOCTYPE html>
<html>
<head>
<title>前端学习</title>
<meta charset="utf-8">
<!--测试内部样式-->
<style type="text/css">
div{
width: 400px;
height: 300px;
padding: 30px;
border: 5px solid red;
margin: 20px;
}
</style>
</head>
<body>
<div>
<h1>测试内部样式</h1>
</div>
</body>
</html>
测试结果如下：
结论：
通过内部样式设置的width、height、padding、border、margin属性不能通过js的element.style获取，其返回值为undefined。
外部样式测试
<!DOCTYPE html>
<html>
<head>
<title>前端学习</title>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="demo.css">
</head>
<body>
<div>
<h1>测试外部样式</h1>
</div>
</body>
</html>
外部样式设置如下：
div{
width: 400px;
height: 300px;
padding: 30px;
border: 5px solid red;
margin: 20px;
}
测试结果如下：
结论：
通过外部样式设置的width、height、padding、border、margin属性不能通过js的element.style获取，其返回值为undefined
784
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
