Last active
November 3, 2020 12:33
-
-
Save d7my11/ac5b9c468033ce567981fd769e847cf0 to your computer and use it in GitHub Desktop.
This file contains 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
const camelCaseToKebabCase = (value) => { | |
if (typeof value !== 'string') return value | |
return value.replace(/[A-Z]/g, (char, index, wholeValue) => { | |
return wholeValue[index] = `${index === 0 ? '' : '-'}${char.toLowerCase()}` | |
}) | |
} | |
const getStyles = (element) => { | |
const elementStyles = {} | |
const appliedStyles = getComputedStyle(element) | |
const styleKeys = Object.keys(appliedStyles).filter((x) => Number.isNaN(Number(x))) | |
styleKeys.forEach((styleKey) => { | |
if (appliedStyles[styleKey]) { | |
const property = camelCaseToKebabCase(styleKey) | |
elementStyles[property] = appliedStyles[styleKey] | |
} | |
}) | |
return elementStyles | |
} | |
/* | |
In Chrome console you can do: | |
- copy(getStyles(document.getElementById('your-id-selector'))) | |
- pick an element in Chrome elements -> in console: copy(getStyles($0)) | |
*/ |
@camara90100 because getStyles
expects an element, but you can do:
Array.from(document.getElementsByClassName('')).map(getStyles)
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
@d7my11 got an error when I tried to test it on Twitter.