How to get the "declared" CSS value, not the computed CSS value
How can we use JavaScript to get the value of a CSS declared value (like the value that appears when inspecting an element with the Chrome inspector?) Everything I am trying to find on the web only seems to want to give a computed value.
For my specific use case, I want to know what the width will be at the end of the CSS transition, which is given in the stylesheet and not in the string. When I check the width with JavaScript, I get the calculated width, which at the time of extraction in the script is at the beginning of the transition, so it shows me 0
, although in 300ms it will be the declared width for example 320px
.
source to share
I think this is what you need:
$('#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 that this still falls prey to cross-domain warnings (if the CSS is hosted on a CDN / other domain, you won't be able to get styleSheet
, and therefore won't be able to access the possible width.
source to share
Watch the transition event . Can it be used for your use?
EDIT
Since this answer has been approved, I am pasting the code below.
element.addEventListener("transitionend", function() {
// get CSS property here
}, false);
source to share
I picked the most helpful answer to my question, but it looks like the solution I was looking for doesn't exist. What I needed was to get the width of the element in pixels before the transition is actually complete. This width is based on percentages, so the actual pixel width will vary based on a number of factors. What I was actually doing in reality was:
- Create a clone of a jQuery element for which I need an "end", transition measurement.
- Cloning screen placement
- Adding inline styles to the clone, removing inherited CSS properties so that it gets the final / final width right away.
- Using JS to store finite width of a variable
- Removing a clone with jQuery.remove ()
Having done this, I now know what the final width in pixels will be when the element starts to transition, instead of waiting for the transition to end to capture the final 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;
};
source to share