How to get CSS property value via JS-JS Tutorial-php.cn

How to get CSS property value via JS

jacklove

Release： 2018-06-11 16:18:15

Original

2806 people have browsed it

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <meta http-equiv="content-type" content="text/html; charset=utf-8">
  <title> JS获取CSS属性 </title>
  <style type="text/css">
	#f{background-color:#FF0000;}
  </style>
 </head>
 <body>
  <p id="f" style="width:200px; height:200px;"></p>
  <script type="text/javascript">
	var o = document.getElementById('f');
	document.write(o.style.width + '<br>'); // 200px
	document.write(o.style.backgroundColor + '<br>'); // 空白
	function getDefaultStyle(obj,attribute){
		return obj.currentStyle?obj.currentStyle[attribute] : document.defaultView.getComputedStyle(obj,false)[attribute];   
	}
	document.write(getDefaultStyle(o, 'width') + '<br>'); // 200px
	document.write(getDefaultStyle(o, 'backgroundColor')); // #FF0000
  </script>
 
 </body>
</html>

Copy after login

JS method of obtaining CSS properties:

	function getDefaultStyle(obj,attribute){
		return obj.currentStyle?obj.currentStyle[attribute] : document.defaultView.getComputedStyle(obj,false)[attribute];   
	}

Copy after login

This article explains how to obtain CSS property values through JS. For more related content, please pay attention to the php Chinese website.

Related recommendations:

How to determine the collision method through JS

How to use CSS to achieve the circle effect (CSS Sprites )

How to perform AES256 encryption algorithm through PHP

The above is the detailed content of How to get CSS property value via JS. For more information, please follow other related articles on the PHP Chinese website!