search

Home >Web Front-end >JS Tutorial >How to get CSS property value via JS

How to get CSS property value via JS

jacklove
jackloveOriginal
2018-06-11 16:18:152943browse
<!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>


JS method of obtaining CSS properties: 

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

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!

Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：How to determine collision method through JSNext article：How to determine collision method through JS

Related articles

See more