能否通过HTA JavaScript获取CSS属性值？

我已经能在HTA文件中通过JavaScript获取元素的innerText值，示例代码如下：

<html>
<head>
    <style>
        .testCss::after {
            content: "I want to pull this with javascript";
        }
    </style>
    <HTA:APPLICATION 
        ID="testApp"
        BORDER="thin"
        CAPTION="yes"
        SHOWINTASKBAR="yes"
        SINGLEINSTANCE="yes"
        SCROLL="no"
    />
    <meta http-equiv="x-ua-compatible" content="IE=edge">
</head>
<body>
    <div id="example_of_id">Some inner text that will be pulled</div>
</body>
<script language="javascript">
    var test2 = document.getElementById("example_of_id").innerText;
   // what about getting a css value though?
</script>
</html>

这段代码能成功获取指定ID元素的文本内容，但我想知道能不能用类似方法获取示例中.testCss::after的content这类CSS值，尝试了很多次都没成功（注：我知道这可能没实际意义，就是突发奇想）。

要获取CSS伪元素的样式值，不能直接操作伪元素（因为它不是真实的DOM元素），在HTA（基于IE引擎，你的配置已经指定IE=edge）中可以这样实现：

实现步骤 #

1. 页面中必须存在应用了.testCss类的真实DOM元素——伪元素是依附于宿主元素存在的，没有宿主就无法获取伪元素样式。
2. 使用getComputedStyle方法，传入宿主元素和伪元素选择器作为参数，获取伪元素的计算样式。

修改后的完整代码 #

<html>
<head>
    <style>
        .testCss::after {
            content: "I want to pull this with javascript";
        }
    </style>
    <HTA:APPLICATION 
        ID="testApp"
        BORDER="thin"
        CAPTION="yes"
        SHOWINTASKBAR="yes"
        SINGLEINSTANCE="yes"
        SCROLL="no"
    />
    <meta http-equiv="x-ua-compatible" content="IE=edge">
</head>
<body>
    <div id="example_of_id">Some inner text that will be pulled</div>
    <!-- 添加应用testCss类的宿主元素 -->
    <div class="testCss"></div>
</body>
<script language="javascript">
    // 获取普通元素innerText
    var test2 = document.getElementById("example_of_id").innerText;
    console.log(test2);

    // 获取.testCss::after的content值
    var hostElement = document.querySelector(".testCss");
    if (hostElement) {
        // 获取伪元素的计算样式
        var pseudoStyle = document.defaultView.getComputedStyle(hostElement, "::after");
        // 提取content值（默认带引号）
        var afterContent = pseudoStyle.getPropertyValue("content");
        console.log(afterContent); // 输出 "I want to pull this with javascript"
        
        // 可选：去掉前后引号
        afterContent = afterContent.replace(/^["']|["']$/g, "");
        console.log(afterContent); // 输出 I want to pull this with javascript
    }
</script>
</html>

注意点 #

• 伪元素无法脱离宿主元素独立存在，必须确保页面中有对应的宿主元素。
• 获取到的content值默认会包含引号，可通过正则表达式去除。

内容的提问来源于stack exchange，提问作者bd55