Get CSS not-computed property-value with Javascript only
If you need to access this information programmatically (as opposed to just looking at it in devtools), you're looking for the document.styleSheets
collection. Each stylesheet in the collection has the CSS rules and media query rules, etc., for that stylesheet, in a form where you can access the actual style info, not the computed result.
For example:
var forEach = Array.prototype.forEach.call.bind(Array.prototype.forEach);forEach(document.styleSheets, function(sheet, index) { forEach(sheet.cssRules || sheet.rules, function(rule) { if (rule instanceof CSSStyleRule && rule.selectorText == ".foo") { console.log(".foo's width rule: " + rule.style.width); } });});
.foo { width: calc(100% - 10px);}
How to get the declared CSS value, not the computed CSS value
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>
Get computed value of CSS variable that uses an expression like calc
Technically you cannot because the computed value is not static and will depend on other properties. In this case it's trivial since we are dealing with pixel value but imagine the case where you will have percentage value. Percentage is relative to other properties so we cannot compute it until it's used with var()
. Same logic if we use unit like em
, ch
, etc
Here is a simple example to illustrate:
let div = document.getElementById('example');console.log(window.getComputedStyle(div).getPropertyValue('--example-var'))console.log(window.getComputedStyle(div).getPropertyValue('font-size'))console.log(window.getComputedStyle(div).getPropertyValue('width'))console.log(window.getComputedStyle(div).getPropertyValue('background-size'));
:root { --example-var: calc(100% + 5px - 10px);}#example { font-size:var(--example-var); width:var(--example-var); background-size:var(--example-var);}
<div id='example'>some text</div>
Get actual value specified in CSS using jQuery
Is there a way to get the exact CSS (non-computed) value of an element using jQuery?
You can only retrieve the computed value in px
via the DOM.
That being said, you can work out the percentage by getting the elements height and comparing it to the parent's height. em
, en
and other measurements are not possible.
Get/Set CSS property values via Javascript: questions
1) Isn't it possible to directly get global border color of a div if there is only one color, the same for each side:
Yes, its possible to get the computed style by just using the shorthand property name. I tried the example you have shared on jsfiddle and computedStyle.getPropertyValue("border-color") does return (265,65,0) which is the rgb code for orange as expected.
2) When having style properties in a CSS file, they are only accessible through the getComputedStyle method and not via the style property like style properties defined inline, via a style attribute in the div, I'm right?
Yes. getComputedStyle returns the final computed style value by the browser after applying external, internal and inline style rules. .style attribute only refers to the inline style for the element.
3) If we want to set a style property, we have to use the style attribute of the element, is it not possible using the computed style object?
No. According to this document, getComputedStyle returns a CSSStyleDeclaration object which is read-only.
Related Topics
How to Get Jquery or JavaScript to Change CSS Based on the Current Url
Handling JavaScript Events in Wkwebview
Show Text When the Cursor Hovers Over an Image
Dropdown Checkboxes and Unchecked Parents Element
How to Override Inline CSS Through JavaScript
Horizontal Slideshow with Divs
Jquery - "Fadein Is Not a Function"
Disabling iOS Elastic Body Scroll & Keep Native Scrolling Working
Using Jquery How to Show and Hide Different Div's Onclick Event
Make Named Anchor Bookmarks Appear Always at Top of the Screen When Clicked
Find Next Cell Contained in Sibling Row with Queryselector
Change Text Selection Highlight with Js
Detect Browser Graphics Performance
Bootstrap Modal Makes Scrollbar Disappear After Closing
How to Conditionally Change CSS Styles with Js
Download Blob File from Website Inside Android Webviewclient