Home > Developer > JavaScript
Http://hi.baidu.com/jiang_yy_jiang/item/95217544ea5a31e6bdf451ae
When you see this articleArticleI was wondering, why are you using this attribute? Probably a master? Haha! In other words, I caught a glimpse of the introduction of these attributes in a large website or an e-book in a certain post. Why can I check Baidu? If you say so much, it's actually nothing. I 'd like to share the following example with others:
Cup-likeProgramClerk, let's take a look at getpropertyvalue. In fact, it's hard for programmers to get a line feed!
The getpropertyvalue method in Dom can be used to obtain the specified CSS attribute value in the element. this method supports W3C standards. it works the same as the currentstyle method in IE. the attribute value is obtained based on the specified CSS attribute name. for example, you need to obtain the width of a DIV, how text-align is aligned, and how position is located.
Their differences are:
1: getpropertyvalue must be used together with the getcomputedstyle method.
2: getpropertyvalue supports W3C standards, but does not support ie browsers,
3: currentstyle is not W3C standard. It only supports ie. It cannot be used in FF or other browsers.
If you want to achieve this effect in multiple browsers, you must use it in conjunction with the judgment browser. I will give an example below that is compatible with browsers such as IE and FF to obtain element CSS attribute values.
Syntax: css_value = Window. getcomputedstyle. getpropertyvalue (css_name) return value:
Css_value: return a reference to a CSS property value, such as the text-align value and position value.
Parameters
Window. getcomputedstyle: use the window object to call the getcomputedstyle method to obtain all available CSS attributes.
Css_name: name of the CSS attribute value to be obtained, such as text-align, position, and background.
Getpropertyvalue instance
<HTML>
<Head>
<Title> DOM: currentstyle instance </title>
<Style>
# {
Border: 1px solid;
Width: 200px;
Height: 100px;
Text-align: center;
Position: absolute;
}
</Style>
</Head>
<Body>
<Div id = "A"> </div>
<Script language = "JavaScript">
VaR A = Document. getelementbyid ("A") // obtain the element
If (document. All) {// IE browser
VaR wh = A. currentstyle ["width"];
VaR text_align = A. currentstyle ["textalign"];
VaR posi = A. currentstyle ["position"];
}
Else {// FF or other browsers
VaR wh = Window. getcomputedstyle (A, null). width;
VaR text_align = "textalign"; // all attributes with a horizontal bar (-) must be converted to the attribute name in the FF browser.
Text_align = text_align.replace (/([A-Z])/g, "-$1"); // use regular Conversion
Text_align.tolowercase ();
Text_align = Window. getcomputedstyle (A, null). getpropertyvalue (text_align );
VaR posi = Window. getcomputedstyle (A, null). getpropertyvalue ("position ");
}
Alert ("the width value is:" + Wh );
Alert ("text emission:" + text_align );
Alert ("position value:" + posi );
</SCRIPT>
</Body>
</Html>
TestedGetpropertyvalueAt least compatible with the following browsers: Firefox
W3C standard: Yes
The next step is getcomputedstyle. You need to pay attention to this buddy, only for Firefox! I told you not to do anything about Bs, but also to consider these headaches!
Getcomputedstyle description:
The getcomputedstyle method in Dom can be used to obtain a list of all available CSS attributes in an element. returns an array. note: getcomputedstyle does not directly return the attribute value of a CSS style in the element. it returns an array. this array contains all available CSS attributes. for example: float, positin, border, background, etc.
Generally, this method must be used with the getpropertyvalue attribute to obtain the specified CSS attribute value. For example, you only want to obtain the width value, text-align value, and left value. you must use the getpropertyvalue attribute. for ease of understanding. in the following example, I will only demonstrate the function of the getcomputedstyle method.
This method does not support ie browsers. Use ff and other browsers that support DOM standards.
To obtain the value of an attribute, click currentstyle or getpropertyvalue.
Syntax: arr_style = Window. getcomputedstyle (elem_id, OV); return value:
Arr_style: returns all available CSS attributes in array format.
Parameters
Window: directly calls the window object to access the getcomputedstyle method.
Elem_id: Element ID. To obtain the CSS style of the element
Ov: pseudo element. Whether to obtain pseudo element attribute values, such as hover, active, and link. If you do not want to obtain these pseudo element attribute values, enter null.
Getcomputedstyle instance
<HTML>
<Head>
<Title> DOM: getcomputedstyle instance </title>
</Head>
<Body>
<H2> the length of the obtained CSS attribute array is displayed for the first time, and available attributes are displayed in sequence. You will find background-attachment, background-color, and background-image.
After reading the example, you should understand the specific function of getcomputedstyle. If you want to obtain the value of an attribute, use getpropertyvalue together.
<Div id = "A"> </div>
<Script language = "JavaScript">
VaR A = Document. getelementbyid ("A") // obtain the element
VaR arr_style = Window. getcomputedstyle (A, null );
Alert (arr_style.length); // The length of the array. contains all available CSS attributes.
Alert (arr_style [0]); // Let's see what the first CSS attribute of the array is.
Alert (arr_style [1]); // check the second one.
Alert (arr_style [2]); // returns the third
</SCRIPT>
</Body>
</Html>
The following currentstyle is only for IE. Dude, I told you to join the programmer industry. If you don't have a full hobby, you should stop it! Maybe it's time!
Currentstyle attribute in Dom. literally, this is the current style. true, currentstyle is used to obtain the Style attribute value of CSS in an element. for example, the width value of an element is the height value. even text-align of elements, including position. all CSS attribute values can be obtained. however, currentstyle only supports ie browsers. If you want to achieve the same effect in FF or other dom-based browsers. use the getcomputedstyle attribute. I will give an example below to get the DIV width value and how to discharge the text. and the absolute position value. other browsers such as IE and FF are supported. feel free to browse!
Syntax: O = ELEM. currentstyle [style_name]; return value:
O: returns a reference to a style attribute value of an element.
Parameters
ELEM: To obtain style attributes within the element.
Style_name: style attribute name. For example, width, height, text-align
Currentstyle instance <HTML>
<Head>
<Title> DOM: currentstyle instance </title>
<Style>
# {
Border: 1px solid;
Width: 200px;
Height: 100px;
Text-align: center;
Position: absolute;
}
</Style>
</Head>
<Body>
<Div id = "A"> </div>
<Script language = "JavaScript">
VaR A = Document. getelementbyid ("A") // obtain the element
If (document. All) {// IE browser
VaR wh = A. currentstyle ["width"];
VaR text_align = A. currentstyle ["textalign"];
VaR posi = A. currentstyle ["position"];
}
Else {// FF or other browsers
VaR wh = Window. getcomputedstyle (A, null). width;
VaR text_align = "textalign"; // all attributes with a horizontal bar (-) must be converted to the attribute name in the FF browser.
Text_align = text_align.replace (/([A-Z])/g, "-$1 ");//
Text_align.tolowercase ();
Text_align = Window. getcomputedstyle (A, null). getpropertyvalue (text_align );
VaR posi = Window. getcomputedstyle (A, null). getpropertyvalue ("position ");
}
Alert ("the width value is:" + Wh );
Alert ("text emission:" + text_align );
Alert ("position value:" + posi );
</SCRIPT>
</Body>
------------------------------------------------------------ The above is the original text --------------------------------------------------------------------------
today, this method is also the first time in contact. The reason is that when a splitter bar control is created, its splitter's absolute is located incorrectly, by checking the document, we know that absolute locates the parent node when the parent node and position is relative. When you obtain offsetleft and offsettop through the node, You need to determine what the position of the current offsetparent is, and directly from El. style. position cannot be obtained because it is not an inline style and cannot be obtained directly. You need to use the method described above. Of course, the more common method is:
function getstyle (El, styleprop) { var X; If ( typeof (EL) ==< SPAN class = "str"> "string" ) {x = document. getelementbyid (EL);} else {x = El ;} If (X. currentstyle) var Y = x. currentstyle [styleprop]; else If (window. getcomputedstyle) var Y = document. defaultview. getcomputedstyle (x, null ). getpropertyvalue (styleprop); return Y ;}
References:
Http://www.quirksmode.org/dom/getstyles.html
Http://www.quirksmode.org/js/findpos.html
Http://www.quirksmode.org/dom/w3c_cssom.html#offsetParent
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
