JS get CSS style (Style/getcomputedstyle/currentstyle)

JS get CSS style (Style/getcomputedstyle/currentstyle) _javascript tips

Last Update:2017-01-19 Source: Internet

Author: User

Tags seamonkey

Developer on Alibaba Coud: Build your first app with APIs, SDKs, and tutorials on the Alibaba Cloud. Read more ＞

CSS styles are grouped into three categories:
inline style: is written in tag, inline style is only valid for all tags.
internal style: is written in the inside of the HTML, the internal style is only valid for the Web page.
external style sheet: If many pages need to use the same style (Styles), write the style (Styles) in a CSS file with a. css suffix, and then reference the CSS file in each page that needs to use these styles (Styles).

getComputedStyle is a CSS property value that can get all the final uses of the current element. Returns a CSS style object ([Object Cssstyledeclaration])
Currentstyle is a property of IE browser that returns a CSS style object

Element refers to the DOM object obtained by JS
Element.style//can only get inline style
Element.currentstyle//ie Browser get non inline style
window.getComputedStyle (element, pseudo Class)//non-IE browser get non inline style
Document.defaultView.getComputedStyle (element, pseudo Class)//non IE browser get non inline style
Note: Gecko 2.0 (Firefox 4/thunderbird 3.3/seamonkey 2.1), the second argument "pseudo-class" is required (if it is not a pseudo class, set to null), this argument can now be omitted.

The following HTML contains two CSS styles, and the div with ID tag is inline, and the div style with the ID test is an internal style.

<!doctype html>

JS part

<script type = "Text/javascript" > window.onload = function () {var test = document.getElementById ("test");

    var tag = document.getElementById ("tag"); CSS style object: Css2properties{},cssstyledeclaration console.log (Test.style); Firefox returns empty Object css2properties{}, Google returns empty object cssstyledeclaration{} console.log (Tag.style); Back to Css2properties{width: "500px", Height: "300px", Background-color: "Pink"}// Element.style gets the inline style and, if not inline, is an empty object Console.log (Tag.style.backgroundColor);//pink Console.log (tag.style[' Background-color '])//pink//Get two different ways of writing similar background-color,border-radius,padding-left styles Console.log (test.currents Tyle)//Firefox and Google return CSS objects for Undefined,ie console.log (window.getComputedStyle (test,null))//Google return cssstyledeclaration{...},
    Firefox returns to css2properties{...} Console.log (test)//effect ibid, but before Gecko 2.0 (Firefox 4/thunderbird 3.3/seamonkey 2.1), the second argument "pseudo class" is required (if not pseudo class, set to null) Console.log (test.currentStyle.width);//500px (IE) ConsolE.log (window.getComputedStyle (test). width);
    500px;
    Console.log (window.getComputedStyle (test) [' width ']);//500px; Document.defaultView.getComputedStyle (Element,null) [Attr]/window.getcomputedstyle (Element,null) [attr]} </

 Script>

The above example only verifies that the preceding argument is correct.

For simplicity, we can also do a simple encapsulation of the get style.

function GetStyle (element, attr) {
      if (element.currentstyle) {return
        element.currentstyle[attr];
      } else{return
        window.getComputedStyle (element,null) [attr];
      }
    Console.log (GetStyle (Test, "cssfloat"));//left
    console.log (test, "float");  Left, earlier FF and Chrome need to use cssfloat, but now it is no longer necessary to
    Console.log (test, "stylefloat");/Firefox and Google are undefined
    Console.log (GetStyle (Test, "stylefloat")); IE9 The following must use STYLEFLOAT,IE9 and above to support stylefloat and cssfloat

    console.log (test). GetPropertyValue ("float"))

Corresponding to the float style, ie is used in the stylefloat, and the earlier FF and Chrome used Cssfloat, now FF and Chrome has supported float, and some other attributes, no longer listed, in order not to memorize these differences, We draw out two ways to access CSS style objects:
GetPropertyValue method and GetAttribute method

IE9 and other browsers (GetPropertyValue)
window.getComputedStyle (element, null). GetPropertyValue ("float");
Element.currentStyle.getPropertyValue ("float");
GetPropertyValue does not support hump writing. (Compatible IE9 and above, Ff,chrom,safari,opera)
such as: window.getComputedStyle (Element,null). GetPropertyValue ("Background-color");

For ie6~8, you need to use the GetAttribute method to access the properties of a CSS style object

Element.currentStyle.getAttribute ("float");/no longer need to write stylefloat
Element.currentStyle.getAttribute ("BackgroundColor"); the attribute name needs to be written in the hump, otherwise IE6 not support, if ignore IE6, can write "Background-color"

The above is the entire content of this article, I hope to help you learn, easy to use JS get CSS style.

This article is an English version of an article which is originally in the Chinese language on aliyun.com and is provided for information purposes only. This website makes no representation or warranty of any kind, either expressed or implied, as to the accuracy, completeness ownership or reliability of the article or any translations thereof. If you have any concerns or complaints relating to the article, please send an email, providing a detailed description of the concern or complaint, to info-contact@alibabacloud.com. A staff member will contact you within 5 working days. Once verified, infringing content will be removed immediately.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More