今天我一朋友写轮播图的时候突然问了一个问题,“怎么通过oDiv.style.left” 来得到左边距,当时我就反手就回了一句用offsetLeft,但是奈何他的倔强,就想用oDiv.style.left来获取,得到的是个字符串,宁愿用parseInt去得到它的值。
问题
如例子,这种方式是得不到oDiv的left已实锤。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
* {
padding: 0;
margin: 0;
}
#div {
width: 200px;
height: 200px;
background-color: #ccc;
position: relative;
left: 100px;
top: 100px;
}
</style>
<script>
window.onload = () => {
var oDiv = document.querySelector("#div");
alert(oDiv.style.left);
}
</script>
</head>
<body>
<div id="div"></div>
</body>
</html>
oDiv.style.left只能获取行间的样式(内联样式),嵌入样式 和 外联样式 通过这种方法是获取不到的。
<script>
window.onload = () => {
var oDiv = document.querySelector("#div");
alert(oDiv.style.left);
}
</script>
</head>
<body>
<div id="div" style="left: 300px;"></div>
</body>
解决办法
如果你想通过 (元素.style.属性) 获取到元素的属性值,我们可以通过写一个函数方法调用来获取。
首先呢先来了解一下 style , currentStyle, getComputedStyle 三个方法的区别。
style方法各大浏览器都兼容,但正如上面所例的只能获取到行内样式,获取不到外部样式,如果行内没有样式,则返回的是空值。
currentStyle属性和getComputedStyle属性不能设置属性,只能获取。
currentStyle:只兼容IE浏览器
用法:obj.currentStyle.attr 或者 obj.currentStyle[“attr”];
getComputedStyle:不兼容IE浏览器,兼容谷歌火狐。
用法:getComputedStyle(obj,[pseudoElt]) pseudoElt 对于普通元素设置为null,一般情况下设置为false为了兼容低版本的浏览器。
直接上方法:
function getStyle(obj, attr) {
if (obj.currentStyle) {
return obj.currentStyle[attr];
} else {
return getComputedStyle(obj, false)[attr];
}
}
在js中为了获取外联样式的值可以直接调用此方法,
<script>
window.onload = () => {
var oDiv = document.querySelector("#div");
alert(getStyle(oDiv, "left"));
}
function getStyle(obj, attr) {
if (obj.currentStyle) {
return obj.currentStyle[attr];
} else {
return getComputedStyle(obj, false)[attr];
}
}
</script>
</head>
<body>
<div id="div"></div>
</body>
最好的办法可以把此函数封装在自己的库函数中,每次使用直接调用即可。