I'm trying to make a tool for my wordpress site that will show the current styles of certain css selectors. Ie I would like to show what font (and later color) h1 should be displayed in.
I was thinking of using JS to do this and here is what I started with:
my HTML
<h1 id="harold">This is a H1 Heading</h1>
then in my functions.php to test I'm using this function:
/* Inline script printed out in the footer */
add_action('wp_footer', 'add_script_wp_footer');
function add_script_wp_footer() {
?>
<script>
var h1ID = document.getElementById('harold');
console.log(h1ID.style.font);
console.log("your font is: " + h1ID );
</script>
<?php
}
Ideally this should output helevtica your fontis: content of h1ID.
what I'm getting is <empty string> your font is [object HTMLHeadingElement]
I tried this as well:
var h1ID = document.getElementById('harold');
console.log("your font is: " + h1ID.style.font );
which just outputs your font is: .
I am doing something wrong, obviously, but is there a way I can query what font should be being displayed here? Ideally, I would rather just query by "h1", or "p" or etc, but I couldn't figure out how to do that.
Use getComputedStyle to calculate the current CSS style value. In your case, an example is:
const element = document.getElementById('harold');
const fontFamily = window.getComputedStyle(element).fontFamily;
fontFamily.HTMLElement.style returns just the inline element styles. To get any styles set through CSS, you need the computed style, returned via getComputedStyle(elem).elem.innerHTML.var h1ID = document.getElementById('harold');
console.log(getComputedStyle(h1ID).fontFamily);
console.log("your font is: " + h1ID.innerHTML);h1
{
font-family: Helvetica;
}<h1 id="harold">This is a H1 Heading</h1>