CODEWITHSUNDEEP
javascriptcss
Ben
Ben

Reputation: 3025

How to get the "declared" CSS value, not the computed CSS value

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.

Upvotes: 5

Views: 956

Answers (3)

Ben
Ben

Reputation: 3025

I selected the most helpful answer to my question, but it appears that the solution I was looking for does not exist. What I needed was to get what the width of an element would be in pixels BEFORE the transition actually was completed. This width is percent based and so the actual pixels width would vary based on a number of factors. What I ended up doing in reality was:

  • Making a jQuery clone of the item of which I needed the "end" transition measurement.
  • Positioning the clone off screen
  • Adding inline styles to the clone, remove the CSS inherited transition properties so that it immediately gets the final/end width.
  • Using JS to save the ending width to a variable
  • Removing the clone with jQuery's .remove()

Doing this, I now know what the ending width in pixels would be at the moment the element begins to transition, rather than having to wait until the end of the transition to capture the ending width.

Here is a function that does what I described above.

var getTransitionEndWidth = function($el) {
    $('body').append('<div id="CopyElWrap" style="position:absolute; top:-9999px; opacity:0;"></div>');
    var copyEl = document.createElement('div');
    var $copy = $(copyEl);
    var copyElClasses = $el.attr('class');

    $copy.attr('class', copyElClasses).css({
        WebkitTransition: 'all 0 0',
        MozTransition: 'all 0 0',
        MsTransition: 'all 0 0',
        OTransition: 'all 0 0',
        transition: 'all 0 0'
    }).appendTo($('#CopyElWrap'));
    var postWidth = $copy.width();
    $('#CopyElWrap').remove();
    return postWidth;
};

Upvotes: 0

Ruslanas Balčiūnas
Ruslanas Balčiūnas

Reputation: 7428

Take a look at transitionend event. Can it be used for your use case?

EDIT

Since this answer got upvoted i'm pasting some code below.

element.addEventListener("transitionend", function() {
    // get CSS property here
}, false);

Upvotes: 3

Brad Christie
Brad Christie

Reputation: 101614

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.

Upvotes: 2

Related Questions