如何显示 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

使用getComputedStyle计算当前CSS样式值。在你的情况下，一个例子是：

const element = document.getElementById('harold');
const fontFamily = window.getComputedStyle(element).fontFamily;

Answer 2

字体名称的正确样式属性是 fontFamily。
HTMLElement.style returns 只是内联元素样式。要获得通过 CSS 设置的任何样式，您需要通过 getComputedStyle(elem).
要获取任何 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>

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

How can I display the current font H1 is using by JS

javascript

getelementbyid