Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Look up the DOM to find elements that have multiple CSS properties
/**
* Copy this function in the browser console then start using.
*
* Example:
*
* findMultipleCssProperties([['font-family', 'Roboto'], ['font-weight', 'normal', true], ['font-style', 'italic', true]])
* --> the last parameter (true) means the value should be found exactly, otherwise any string that contains the value is marked as ok
*
*/
function findMultipleCssProperties(propertiesTable) {
var elements = document.getElementsByTagName('*');
Array.prototype.forEach.call(elements, function(element) {
var hasAllProperties = true;
propertiesTable.forEach(function([property, contains, strict = false]) {
var value = window.getComputedStyle(element, null).getPropertyValue(property);
if (strict) {
if (value !== contains) {
hasAllProperties = false;
}
} else {
if (value.indexOf(contains) === -1) {
hasAllProperties = false;
}
}
});
if (hasAllProperties) {
console.log(element);
}
});
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.