js获取css样式封装

时间：2024-11-12 16:05:20
封装

	  function getStyle(obj , attr){

		return obj.currentStyle?obj.currentStyle[attr]:getComputedStyle(obj)[attr]; //兼容写法IE:火狐

	  };

效果如下：

　　js获取css样式封装

<!doctype html>

<html lang="en">

 <head>

  <meta charset="UTF-8">

  <meta name="Generator" content="EditPlus®">

  <meta name="Author" content="">

  <meta name="Keywords" content="">

  <meta name="Description" content="">

  <title>Document</title>

  <style>

	*{

		margin: 0;

		padding: 0;

	}

	#box{

		margin: 50px auto;

		width: 300px;

		height: 250px;

		color: #fff;

		background:#70aa39;

		text-align: center;

		line-height: 50px;

	}

  </style>

 </head>

 <body>

	<div id="box"></div>

 <script>

	var oBox = document.getElementById("box"),

		oW = parseFloat(getStyle(oBox , "width")),

		oH = parseFloat(getStyle(oBox , "height"));

		oBox.innerHTML = "宽:"+oW+"px"+"<br/>"+"高:"+oH+"px";

	//封装

	  function getStyle(obj , attr){

		return obj.currentStyle?obj.currentStyle[attr]:getComputedStyle(obj)[attr]; //兼容写法IE:火狐

	  };

  </script>

 </body>

</html>

相关文章