获取行间样式与在js中设置样式
!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>获取非行间样式</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
#div1{
width: 100px;
height: 200px;
background: red;
border: 1px solid;
margin: 10px auto;
}
</style>
<script type="text/javascript">
<!--获取行间样式-->
function css(obj,attr,value){
if(arguments.length==2){//获取
return getStyle(obj,attr);
}else if(arguments.length==3){//设置
obj.style[attr]=value;
}
}
<!--浏览器的兼容性-->
function getStyle(obj,attr){
if(obj.currentStyle){
return obj.currentStyle[attr];
}else{
return getComputedStyle(obj,false)[attr];
}
}
window.onload=function(){
var oDiv=document.getElementById('div1');
//alert(css(oDiv,'height'));//获取
css(oDiv,'height','300px');//设置
//无法获取符合样式如：border，background只能获取单一样式
}
</script>
</head>
<body>
<div id="div1"></div>
</body>
</html>
