Is there a fast way to retrieve the CSS width definition (or any other CSS attribute) of an element?
Notes
- I need to know the actual definition, like
80%or42vw, and NOT the calculated pixel dimension. - The width might be set on different CSS selectors, as illustrated in the code below
Here is a sample of the markup/CSS I have:
JavaScript
x
10
10
1
body div > section { 2
width: 30% 3
}4
#content section { 5
width: auto 6
}7
first { 8
width: 75% !important9
}10
JavaScript
1
6
1
<body>2
<div id="content">3
<section class="first"> </section>4
</div>5
</body>6
Problem: I want to find out via JS, that the <section> has a width of 75%.
Unfortunately, getMatchedCSSRules() is exactly what I need, but it’s deprecated and already removed from browsers.
Advertisement
Answer
I found a way to determine the exact CSS definition of any element by inspecting the document.styleSheets collection.
Getting accurate results was quite complex, as the result needs to respect (a) media queries that match the current viewport and (b) evaluate the CSS specificity of selectors.
Here is a complete function that’s optimized for high performance – finding a single property among 40+ CSS files with a total of 15k+ of individual rules took 40-50ms
Here is the gist (might be more current than the code below)
JavaScript
1
343
343
1
/**2
* Scans all CSS rules in the current document to find the most3
* specific definiton of a single CSS property for a given element.4
*5
* Usage: getStyleDef('#my-element', 'width'); 6
* --> returns the most specific "width" defintiion, e.g. "27em".7
*8
* @param {HTMLElement} element - The HTML Element to inspect.9
* @param {string} prop - The CSS property to inspect.10
* @return {string} The most specific CSS definition, 11
* or an empty string.12
*/13
function getStyleDef(element, prop) {14
let result = '';15
let highestSpecificity = false;16
const allRules = [];17
const relevantRules = [];18
19
// Translate a selector string into an HTMLElement.20
if ('string' === typeof element) {21
element = document.querySelector(element);22
}23
24
// Translate a jQuery element to a HTMLElement.25
if (element && element instanceof jQuery) {26
element = element.get(0);27
}28
29
// Bail, if no valid element is specified.30
if (!element || !(element instanceof HTMLElement)) {31
return '';32
}33
34
// When an inline style is set, always return it.35
if (element.style && '' !== element.style[prop]) {36
return element.style[prop];37
}38
39
// Parse all stylesheet entries to find relevant CSS rules.40
_getRelevantRules(element);41
42
// Loop all relevant rules to find the most specific one.43
for (let i = relevantRules.length - 1; i >= 0; i--) {44
// Is there a rule for the required property?45
if ('' === relevantRules[i].style[prop]) {46
continue;47
}48
49
// Determine the specificity of the given CSS selector.50
const specificity = _getCssSpecificity(51
relevantRules[i].selectorText,52
relevantRules[i].style[prop]53
);54
55
// Find the most specific CSS definition.56
if (_compareCssSpecificity(specificity, highestSpecificity) > 0) {57
highestSpecificity = specificity;58
result = relevantRules[i].style[prop];59
}60
}61
62
return result;63
64
// -- Helper functions follow --65
66
/**67
* Convert an array-like object to array.68
*69
* @param {Iterable} list - A value-list that can be converted to an array.70
* @return {array} An array representation of the list, or an empty array.71
*/72
function _toArray(list) {73
if ('undefined' === typeof list || null === list) {74
return [];75
}76
try {77
if ('function' === typeof Array.from) {78
return Array.from(list);79
} else {80
return [].slice.call(list);81
}82
} catch (exception) {83
// In case the list cannot be converted, return an empty array.84
return [];85
}86
}87
88
/**89
* Handles extraction of `cssRules` as an `Array` from a stylesheet90
* or something that behaves the same.91
*92
* The rules are prepended to the allRules array. This function does93
* not return a value.94
*95
* @param {CSSStyleSheet} stylesheet - The stylesheet to parse.96
*/97
function _extractSheetRules(stylesheet) {98
try {99
// Skip disabled rules.100
if (stylesheet.disabled) {101
return;102
}103
104
// Skip rules that do not match the current viewport.105
const media = stylesheet.media;106
if (media && !matchMedia(media.mediaText).matches) {107
return;108
}109
110
// Prepend the rules to the `allRules` array.111
Array.prototype.unshift.apply(allRules, _toArray(stylesheet.cssRules));112
} catch (exception) {113
/*114
* CORS prevents us from accessing rules from other domains, such115
* as google font styles.116
*/117
}118
}119
120
/**121
* Parses all stylesheets and populates the `relevantRules` array with CSS122
* rules that match the given element AND the current viewport size.123
*124
* @param {HTMLElement} element - The element to inspect.125
* @private126
*/127
function _getRelevantRules(element) {128
let rule;129
130
// assuming the browser hands us stylesheets in order of appearance131
// we iterate them from the beginning to follow proper cascade order132
for (let i = 0; i < document.styleSheets.length; i++) {133
134
// Extract the style rules of this sheet into `allRules`.135
_extractSheetRules(document.styleSheets[i]);136
137
// Loop the rules in order of appearance.138
while (rule = allRules.shift()) {139
if (rule.styleSheet) {140
// Insert the `@import`ed stylesheet's rules at the141
// beginning of this stylesheet's rules.142
_extractSheetRules(rule.styleSheet);143
144
// ... and skip the rest of this rule.145
continue;146
}147
148
// If there's no stylesheet attribute BUT there IS a149
// media attribute it's a media rule.150
if (rule.media) {151
// insert the contained rules of this media rule to152
// the beginning of this stylesheet's rules.153
_extractSheetRules(rule);154
155
// ... and skip the rest it.156
continue;157
}158
159
// check if this element matches this rule's selector160
if (element.matches(rule.selectorText)) {161
// push the rule to the results set162
relevantRules.push(rule);163
}164
}165
}166
}167
168
/**169
* Calculates the CSS specificity of a CSS selector.170
*171
* @param input - The CSS selector.172
* @param attribValue - Optional. A specific CSS attribute value. Only used173
* to properly recognize `!important` values.174
* @return {array} Always an array with 4 elements.175
*/176
function _getCssSpecificity(input, attribValue) {177
const token = input.split(',');178
179
if (token.length > 1) {180
let result = [];181
let singleSpecificity;182
183
for (let i = 0; i < token.length; i++) {184
singleSpecificity = _getCssSpecificity(token[i]);185
if (_compareCssSpecificity(singleSpecificity, result) > 0) {186
result = singleSpecificity;187
}188
}189
190
return result;191
}192
193
let selector = input,194
findMatch,195
typeCount = {196
'a': 0,197
'b': 0,198
'c': 0199
},200
// The following regular expressions assume that selectors matching the201
// preceding regular expressions have been removed.202
attributeRegex = /([[^]]+])/g,203
idRegex = /(#[^#s+>~.[:)]+)/g,204
classRegex = /(.[^s+>~.[:)]+)/g,205
pseudoElementRegex = /(::[^s+>~.[:]+|:first-line|:first-letter|:before|:after)/gi,206
// A regex for pseudo classes with brackets - :nth-child(),207
// :nth-last-child(), :nth-of-type(), :nth-last-type(), :lang()208
// The negation pseudo class (:not) is filtered out because specificity209
// is calculated on its argument.210
// :global and :local are filtered out - they look like pseudo classes211
// but are an identifier for CSS Modules.212
pseudoClassWithBracketsRegex = /(:(?!not|global|local)[w-]+([^)]*))/gi,213
// A regex for other pseudo classes, which don't have brackets214
pseudoClassRegex = /(:(?!not|global|local)[^s+>~.[:]+)/g,215
elementRegex = /([^s+>~.[:]+)/g,216
isImportant;217
218
isImportant = 'string' === typeof attribValue && attribValue.indexOf('!important') > 0;219
220
// Find matches for a regular expression in a string and push their details221
// to parts. Type is "a" for IDs, "b" for classes, attributes and pseudo-222
// classes and "c" for elements and pseudo-elements.223
findMatch = function (regex, type) {224
let matches, i, len, match, index, length;225
if (regex.test(selector)) {226
matches = selector.match(regex);227
for (i = 0, len = matches.length; i < len; i += 1) {228
typeCount[type] += 1;229
match = matches[i];230
index = selector.indexOf(match);231
length = match.length;232
// Replace this simple selector with whitespace so it won't be233
// counted in further simple selectors.234
selector = selector.replace(match, Array(length + 1).join(' '));235
}236
}237
};238
239
// Replace escaped characters with plain text, using the "A" character240
// https://www.w3.org/TR/CSS21/syndata.html#characters241
(function () {242
const replaceWithPlainText = function (regex) {243
let matches, i, len, match;244
245
if (regex.test(selector)) {246
matches = selector.match(regex);247
for (i = 0, len = matches.length; i < len; i += 1) {248
match = matches[i];249
selector = selector.replace(match, Array(match.length + 1).join('A'));250
}251
}252
},253
// Matches a backslash followed by six hexadecimal digits followed254
// by an optional single whitespace character.255
escapeHexadecimalRegex = /\[0-9A-Fa-f]{6}s?/g,256
// Matches a backslash followed by fewer than six hexadecimal digits257
// followed by a mandatory single whitespace character.258
escapeHexadecimalRegex2 = /\[0-9A-Fa-f]{1,5}s/g,259
// Matches a backslash followed by any character.260
escapeSpecialCharacter = /\./g;261
262
replaceWithPlainText(escapeHexadecimalRegex);263
replaceWithPlainText(escapeHexadecimalRegex2);264
replaceWithPlainText(escapeSpecialCharacter);265
}());266
267
// Remove anything after a left brace in case a user has pasted in a rule, not just a268
// selector269
(function () {270
let regex = /{[^]*/gm,271
matches, i, len, match;272
273
if (regex.test(selector)) {274
matches = selector.match(regex);275
for (i = 0, len = matches.length; i < len; i += 1) {276
match = matches[i];277
selector = selector.replace(match, Array(match.length + 1).join(' '));278
}279
}280
}());281
282
// Add attribute selectors to parts collection (type b)283
findMatch(attributeRegex, 'b');284
285
// Add ID selectors to parts collection (type a)286
findMatch(idRegex, 'a');287
288
// Add class selectors to parts collection (type b)289
findMatch(classRegex, 'b');290
291
// Add pseudo-element selectors to parts collection (type c)292
findMatch(pseudoElementRegex, 'c');293
294
// Add pseudo-class selectors to parts collection (type b)295
findMatch(pseudoClassWithBracketsRegex, 'b');296
findMatch(pseudoClassRegex, 'b');297
298
// Remove universal selector and separator characters299
selector = selector.replace(/[*s+>~]/g, ' ');300
301
// Remove any stray dots or hashes which aren't attached to words302
// These may be present if the user is live-editing this selector303
selector = selector.replace(/[#.]/g, ' ');304
305
// Remove the negation pseudo-class (:not) but leave its argument because306
// specificity is calculated on its argument. Remove non-standard :local and307
// :global CSS Module identifiers because they do not effect the specificity.308
selector = selector.replace(/:not/g, ' ');309
selector = selector.replace(/:local/g, ' ');310
selector = selector.replace(/:global/g, ' ');311
selector = selector.replace(/[()]/g, ' ');312
313
// The only things left should be element selectors (type c)314
findMatch(elementRegex, 'c');315
316
return [isImportant ? 1 : 0, typeCount.a, typeCount.b, typeCount.c];317
}318
319
/**320
* Compares two CSS Specificity terms to determine, which one is more321
* specific.322
*323
* @param a - The first term324
* @param b - The second term.325
* @returns {number} 0 if both are equally specific. +1 if a is more326
* specific, -1 if b is more specific.327
*/328
function _compareCssSpecificity(a, b) {329
for (let i = 0; i < 4; i += 1) {330
const valA = parseInt(isNaN(a[i]) ? 0 : a[i]);331
const valB = parseInt(isNaN(b[i]) ? 0 : b[i]);332
333
if (valA < valB) {334
return -1;335
} else if (valA > valB) {336
return 1;337
}338
}339
340
return 0;341
}342
}343