How to get the “declared” CSS value, not the computed CSS value


Tags: javascript,css

Problem :

How can we use JavaScript to get the value of the declared CSS value (like the value that shows up when inspecting an element using Chrome's inspector? Everything I try and search for on the web seems to only want to give the computed value.

For my specific use case I want to know what the width will be at the end of a CSS transition, which is set in the stylesheet, not inline. When I check for the width using JavaScript, I get the computed width, which at the time of retrieval in the script is at the beginning of the transition, so shows me 0 even though in 300ms it will be a declared width like 320px.



Solution :

I think this is what you're after:

$('#widen').on('click', function(e){
    $('.example').addClass('wider');
    
    $('#prefetch').text('The div will be: ' + getWidth('wider'));
});

function getWidth(className){
    for (var s = 0; s < document.styleSheets.length; s++){
        var rules = document.styleSheets[s].rules || document.styleSheets[s].cssRules; console.log(rules);
        for (var r = 0; r < rules.length; r++){
            var rule = rules[r]; console.log(rule);
            if (rule.selectorText == '.'+className){
                console.log('match!');
                return rule.style.width;
            }
        }
    }
    return undefined;
}
.example {
    width: 100px;
    background-color: #ccc;
    border: 1px solid black;
}
.wider {
    width: 320px;
    -webkit-transition: width 5s;
    -moz-transition: width 5s;
    -o-transition: width 5s;
    transition: width 5s;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<div class="example">This is a simple container.</div>
<button id="widen" type="button">Widen</button>
<span id="prefetch"></span>

Keep in mind, I believe this still falls victim to cross-domain preventions (if the CSS is hosted on a CDN/other domain, you won't be able to retrieve the styleSheet, and, therefore, not be able to access then eventual width.


    CSS Howto..

    How to create image curved using css or jquery (See picture)

    css - how to get (responsive) li's with the same height when they have a different width?

    How to make the textbox above the slider

    How do I get my link background to go beneath it during hover?

    How can I write a complex fraction using HTML/CSS/jQuery?

    How do I set multiple elements' css in one page without the :not attribute?

    How to load CSS in Django templates?

    How to get a small div bar to slide down a menu on mouseover

    How do I properly add a scrollbar to a jQuery Mobile popup using iScrollview?

    How to Access A To String Function with PHP?

    How to get a frame off animated png using CSS?

    Android WebView : how do I control webView height?

    Show image when hovering on a span

    How can I style a button to look the same as the home button in Google Chrome with CSS? [closed]

    How to make an invisible character in HTML, that still get's picked up on text selection?

    how to position an “Insert row” button in front of each horizontal row border of a table?

    How to have vertical record and header in HTML table using CSS

    How to do a resizable link a:hover in CSS

    How to run a Javascript function on an iframe before the source (src) is loaded?

    How to get dynamic css layout like that:

    how to make the img at the left side and the texts at the right side vertically line up

    On css: if text line is break show dots

    How to reload or rerender CSS for a single HTML element? [duplicate]

    How to set -fx-max-width to USE_PREF_SIZE in JavaFX css?

    How did he get the sidebar to remain on the left, even as the right side of the page can scroll?

    How to render CSS conditionally in page

    How to align an img and a carousel next to each other, with max-width of 1000px?

    How to write css for alt attribute of img tag (word-break: break-all property doesn't work in IE)

    How to add CSS class dynamically to html element

    How to declare a div in @page @top-left