Home > Developer > Web Develop
In the process of debugging the Web page, often use JS to get the elements of the CSS style, there are many ways, now only I often use the method summarized as follows:
1. Obj.style: This method can only be JS can only get written in the HTML tag in the Style property of the value (style= "..."), and can not get defined in <style type= "Text/css" > inside the property.
1//www.w3.org/1999/xhtml ">23<meta http-equiv= "Content-type" content= "text/html; Charset=utf-8″/>4<title>js Get CSS Property values </title>5<style type= "Text/css" >6 7 . Ss{color: #cdcdcd;}8 9</style>Ten One A<body> -<div id= "css88″class=" ss "style=" width:200px; height:200px; Background: #333333 ″>js get CSS property values </div> - the<script type= "Text/javascript" > -Alert (document.getElementById ("Css88″). Style.width);//200px -Alert (document.getElementById ("Css88″). Style.color);//Blank -</script> +</body> -2. The Obj.currentstyle method is used in IE, and FF is the getComputedStyle method
The DOM2-level style enhances the Document.defaultview and provides the getComputedStyle () method. This method takes two parameters: to get the element of the calculated style and a pseudo-element string (for example, ": after"). If no pseudo-element information is required, the second argument can be null. The Getcomputerstyle () method returns a Cssstyledeclaration object that contains all the computed styles of the current element. Take the following HTML page as an example:
The code is as follows:
123<title> Calculate element Styles </title>4<style>5 #myDiv {6 width:100px;7 height:200px;8 } 9</style>Ten<body> One<div id = "Mydiv" style= "border:1px solid black" ></div> A -<script> - varMydiv = document.getElementById ("mydiv"); the varComputedstyle = Document.defaultView.getComputedStyle (Mydiv,NULL); - -alert (Computedstyle.backgroundcolor);//"Red" -alert (computedstyle.width);//"100px" +alert (computedstyle.height);//"200px" -alert (Computedstyle.border);//in some browsers, "1px solid black" +</script> A</body> at -The border property may also not return the actual border rule in the style sheet (opera will return but not other browsers). The reason for this difference is that different browsers interpret synthetic properties differently, because setting this property actually involves many other properties. When you set border, you actually set the border width, color, and style properties of four edges. Therefore, even though Computedstyle.border does not return a value in all browsers, Computedstyle.borderleftwidth returns a value.
It is important to note that even though some browsers support this functionality, there may be a difference in how values are represented. For example, Firefox and Safari will return all colors converted to RGB format. Therefore, even if the getComputedStyle () method is best tested in several browsers.
IE does not support the getComputedStyle () method, but it has a similar concept. In IE, each element with the style attribute also has a Currentstyle property. This property is an instance of cssstyledeclaration that contains all the computed styles of the current element. The method of obtaining these styles is similar to the following:
The code is as follows:<span style= "FONT-FAMILY:ARIAL;FONT-SIZE:14PX;" >var mydiv = document.getElementById ("mydiv"var computedstyle =// //////undefined</span>
As with the DOM version, IE does not return the border style, as this is a comprehensive attribute.
3. A simple function I wrote during the test case (for Chrome):
The code is as follows: <span style= "FONT-FAMILY:ARIAL;FONT-SIZE:14PX;" > Function getcss (div) {return document.defaultView.getComputedStyle (div, null);//return div.currentstyle;//No use, IE}</span> —————————————————————————————————————— Web Reviews: The following function is able to get an arbitrary CSS property value for an element.
function GetStyle (element, attr) {
if (Element.currentstyle) {
return element.currentstyle[attr];
} else {
return getComputedStyle (element, false) [attr];
}
}
For example, if you want to get lists's Left property value in this example, you just need to GetStyle (lists, "left").
In order to let more students see this method, please help top up, thank you!JS using the getComputedStyle () method to get CSS property values
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
