Last active
May 7, 2016 13:42
-
-
Save gmetais/c93cd047b677ace5e635cb76691139cc to your computer and use it in GitHub Desktop.
Look up the DOM to find elements that have multiple CSS properties
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/** | |
* 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