javascript - 如何显示JS当前使用的H1字体

Question

我正在尝试为我的 WordPress 网站制作一个工具，它将显示某些 css 选择器的当前样式。即我想展示 h1 应该显示什么字体(以及后来的颜色)。

我正在考虑使用 JS 来做到这一点，这就是我的开始:

我的 HTML

<h1 id="harold">This is a H1 Heading</h1>

然后在我的functions.php中测试我正在使用这个函数:

/* 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
}

理想情况下应该输出 helevtica your fontis: content of h1ID .

我得到的是<empty string> your font is [object HTMLHeadingElement]

我也尝试过:

        var h1ID = document.getElementById('harold');
        console.log("your font is: " + h1ID.style.font );

它只输出your font is: .

显然我做错了什么，但是有没有办法可以查询这里应该显示什么字体？理想情况下，我宁愿只通过“h1”或“p”等查询，但我不知道如何做到这一点。

Answer 1

1. 字体名称的正确样式属性是 fontFamily。
2. HTMLElement.style 仅返回内联元素样式。要获取通过 CSS 设置的任何样式，您需要通过 getCompulatedStyle(elem) 返回的计算样式。
3. 要获取任何 HTMLElement 的内容，您可以使用 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>