style:
各大浏览器都兼容,能设置样式和获取样式,但是该方法只能获取到行内样式,获取不了外部的样式。如果写了行内没有的样式,返回的是空值.
用法:
获取元素的属性值：element.style.attr
设置元素的值：element.style.attr="值";
currentStyle:
不能设置属性,只能获取属性值，该属性只兼容IE,不兼容火狐和谷歌
用法:
element.currentStyle["attr"]或者element.currentStyle.attr
getComputedStyle:
不能设置属性,只能获取属性值，该属性兼容火狐谷歌,不兼容IE
用法:
window.getComputedStyle(ele,null)[attr]获取是window.getComputedStyle(ele,null).attr
封装一个函数，可以兼容各个浏览器，获取任一元素的任一属性值：
//获得任一元素的任一属性的值
function getStyle(element,attr){
return window.getComputedStyle ?window.getComputedStyle(element,null)[attr]:element.currentStyle[attr];
}用法例子：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div{
width: 100px;
height: 100px;
background-color: #8bff56;
left: 100px;
}
</style>
</head>
<body>
<div id="box"></div>
<script>
//获得任一元素的任一属性的值
function getStyle(element,attr){
return window.getComputedStyle ?window.getComputedStyle(element,null)[attr]:element.currentStyle[attr];
}
var width=getStyle(document.getElementById("box"),"width");
console.log(width);
</script>
</body>
</html>