mozilla
Your Search Results

    window.getDefaultComputedStyle Redirect 1

    « DOM Reference « CSSOM

    Summary

    getDefaultComputedStyle() gives the default computed values of all the CSS properties of an element, ignoring author styling.  That is, only user-agent and user styles are taken into account.

    Syntax

    var style = window.getDefaultComputedStyle(element[, pseudoElt]);
    
    element
    The Element for which to get the computed style.
    pseudoElt Optional
    A string specifying the pseudo-element to match. Must be null (or not specified) for regular elements.

    The returned style is a CSSStyleDeclaration object.

    Example

    var elem1 = document.getElementById("elemId");
    var style = window.getDefaultComputedStyle(elem1);
    
    <style>
    #elem-container {
       position: absolute;
       left:     100px;
       top:      200px;
       height:   100px;
     }
    </style>
    
    <div id="elem-container">dummy</div>
    <div id="output"></div>  
    
    <script>
        var elem = document.getElementById("elem-container");
        var theCSSprop = window.getDefaultComputedStyle(elem).position;
        document.getElementById("output").innerHTML = theCSSprop; // will output "static"
    </script>   

    Description

    The returned object is of the same type as the object returned by getComputedStyle, but only takes into account user-agent and user rules.

    Use with pseudo-elements

    getDefaultComputedStyle can pull style info from pseudo-elements (for example, ::after, ::before).

    <style>
     h3:after {
       content: ' rocks!';
     }
    </style>
    
    <h3>generated content</h3> 
    
    <script>
      var h3       = document.querySelector('h3'), 
          result   = getDefaultComputedStyle(h3, ':after').content;
    
      console.log('the generated content is: ', result); // returns 'none'
    </script>
    

    Notes

    The returned value is, in certain known cases, expressly incorrect by deliberate intent. In particular, to avoid the so called CSS History Leak security issue, browsers may expressly "lie" about the used value for a link and always return values as if a user has never visited the linked site, and/or limit the styles that can be applied using the :visited pseudo-selector. See http://blog.mozilla.com/security/2010/03/31/plugging-the-css-history-leak/ and http://hacks.mozilla.org/2010/03/privacy-related-changes-coming-to-css-vistited/ for details of the examples of how this is implemented.

    Browser compatibility

    Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari
    Basic support Not supported 19 Not supported Not supported Not supported
    pseudo-element support Not supported 19 Not supported Not supported Not supported
    Feature Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
    Basic support Not supported 19 WP7 Mango Not supported Not supported
    pseudo-element support Not supported 19 Not supported Not supported Not supported

    Specification

    • Proposed to the CSS working group

    Document Tags and Contributors

    Contributors to this page: Sheppy
    Last updated by: Sheppy,
    Hide Sidebar