JS USES the getComputedStyle of of method to get the CSS property value
- 2020-03-30 02:43:12
- OfStack
In the process of debugging the web page, js is often used to get the CSS style of elements, there are many methods, now I only use the method as follows:
1. Obj. style: this method can only be used by JS to obtain the value of the style attribute written in the HTML tag (style= "... "). ) and could not get the definition in < Style type = "text/CSS" > Properties inside.
2. The obj.currentStyle method is used in IE, while the getComputedStyle method is used in FF
"Dom2-level style" enhances document.defaultview to provide the getComputedStyle() method. This method takes two arguments: the element to get the computed style and a pseudo-element string (for example, "after"). The second parameter can be null if the pseudo-element information is not required. The getComputerStyle() method returns a CSSStyleDeclaration object that contains the style of all the calculations for the current element. Take the following HTML page as an example:
The border property may not return the actual border rule in the stylesheet either (Opera does, but other browsers don't). The reason for this difference is that different browsers interpret the composite property in different ways, because setting this property actually involves many other properties. When setting a border, you actually set the border width, color, and style properties of the four edges. . Therefore, even if computedStyle border will not return values in all browsers, but computedStyle borderLeftWidth will return a value.
It's important to note that even though some browsers support this functionality, the way values are represented may vary. For example, Firefox and Safari return to convert all colors to RGB format. Therefore, even with the getComputedStyle() method, it is best to test it in several browsers.
IE does not support the getComputedStyle() method, but it has a similar concept. In IE, each element with a style attribute also has a currentStyle attribute. This property is an instance of the CSSStyleDeclaration, which contains the computed style of the current element. The methods for obtaining these styles are similar, as follows:
Like the DOM version, IE does not return the border style, because it is a composite property.
3. A simple function I wrote myself while writing a test case (for Chrome) :
1. Obj. style: this method can only be used by JS to obtain the value of the style attribute written in the HTML tag (style= "... "). ) and could not get the definition in < Style type = "text/CSS" > Properties inside.
<span style="font-family:Arial;font-size:14px;"><!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>JS To obtain CSS Attribute values </title>
<style type= " text/css " >
<! �
.ss{color:#cdcdcd;}
� >
</style>
</head>
<body>
<div id= " css88 " class= " ss " style= " width:200px; height:200px; background:#333333 " >JS To obtain CSS Attribute values </div>
<script type= " text/javascript " >
alert(document.getElementById( " css88 " ).style.width);//200px
alert(document.getElementById( " css88 " ).style.color);// blank
</script>
</body>
</html> </span>
2. The obj.currentStyle method is used in IE, while the getComputedStyle method is used in FF
"Dom2-level style" enhances document.defaultview to provide the getComputedStyle() method. This method takes two arguments: the element to get the computed style and a pseudo-element string (for example, "after"). The second parameter can be null if the pseudo-element information is not required. The getComputerStyle() method returns a CSSStyleDeclaration object that contains the style of all the calculations for the current element. Take the following HTML page as an example:
<span style="font-family:Arial;font-size:14px;"><!DOCTYPE html>
<html>
<head>
<title> Calculate element style </title>
<style>
#myDiv {
background-color:blue;
width:100px;
height:200px;
}
</style>
<body>
<div id ="myDiv" style="background-color:red; border:1px solid black"></div>
<script>
var myDiv = document.getElementById("myDiv");
var computedStyle = document.defaultView.getComputedStyle(myDiv, null);
alert(computedStyle.backgroundColor); //"red"
alert(computedStyle.width); //"100px"
alert(computedStyle.height); //"200px"
alert(computedStyle.border); //In some browsers it's "1px solid black"
</script>
</body>
</head>
</html></span>
The border property may not return the actual border rule in the stylesheet either (Opera does, but other browsers don't). The reason for this difference is that different browsers interpret the composite property in different ways, because setting this property actually involves many other properties. When setting a border, you actually set the border width, color, and style properties of the four edges. . Therefore, even if computedStyle border will not return values in all browsers, but computedStyle borderLeftWidth will return a value.
It's important to note that even though some browsers support this functionality, the way values are represented may vary. For example, Firefox and Safari return to convert all colors to RGB format. Therefore, even with the getComputedStyle() method, it is best to test it in several browsers.
IE does not support the getComputedStyle() method, but it has a similar concept. In IE, each element with a style attribute also has a currentStyle attribute. This property is an instance of the CSSStyleDeclaration, which contains the computed style of the current element. The methods for obtaining these styles are similar, as follows:
<span style="font-family:Arial;font-size:14px;">var myDiv = document.getElementById("myDiv");
var computedStyle = myDiv.currentStyle;
alert(computedStyle.backgroundColor); //"red"
alert(computedStyle.width); //"100px"
alert(computedStyle.height); //"200px"
alert(computedStyle.border); //undefined</span>
Like the DOM version, IE does not return the border style, because it is a composite property.
3. A simple function I wrote myself while writing a test case (for Chrome) :
<span style="font-family:Arial;font-size:14px;">function getCSS(div){
return document.defaultView.getComputedStyle(div, null);
//return div.currentStyle;// Never used, IE
}</span>