Created
September 6, 2023 21:00
-
-
Save KimSarabia/5e5ea32ff94237bf69568e223233da3d to your computer and use it in GitHub Desktop.
Quick tool for grabbing calculated font sizes in the browser given an array of classes
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
function getComputedFontSizes(classNames) { | |
const results = {}; | |
classNames.forEach(className => { | |
// Get all elements with the specified class name. | |
const elementsWithClass = document.getElementsByClassName(className); | |
if (elementsWithClass.length > 0) { | |
// Select the first element with the specified class. | |
const targetElement = elementsWithClass[0]; | |
// Get the computed style for the selected element. | |
const computedStyle = window.getComputedStyle(targetElement); | |
// Get the computed font-size value. | |
const fontSize = computedStyle.getPropertyValue('font-size'); | |
// Store the computed font-size value in the results object. | |
results[className] = fontSize; | |
} else { | |
results[className] = 'Class not found'; | |
} | |
}); | |
return results; | |
} | |
// Example: Replace with an array of class names you want to inspect. | |
const classNamesToInspect = ['class1', 'class2', 'class3']; | |
const computedFontSizes = getComputedFontSizes(classNamesToInspect); | |
// Log the results object to the console. | |
console.log(computedFontSizes); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment