Search code examples
javascripthtmlcsshta

Is it possible to pull CSS values with HTA JavaScript?

I know that it is possible to get innerText values with JavaScript in an HTA file, like in the example below:

<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>

This will successfully pull the inner text from the id specified.

I was wondering if the same can be done to pull css values like the one in the example, because until now I did not have any luck finding examples regarding this issue nor did my manual attempts lead to any luck.

P.S. I know that probably this is pointless, but I just had this idea the other day because I have never seen anything like that.

Solution

  • The CSS content can be retrieved by using document.querySelector and window.getComputedStyle as shown in the example below.

    Also note that the posted example lacks a DOCTYPE declaration and is set to run in IE=edge mode, which is the same as IE=11 mode (edge mode has nothing to do with the Edge browser). The HTA:Application section is ignored in modes above IE=9, so that's an issue with the example as posted.

    Example1.hta

    <!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" http-equiv="X-UA-Compatible" content="IE=9">
<HTA:Application 
 contextmenu=no
>
<style>
  .testClass::after {
    content:" world";
  }
</style>
<script language="JScript">
window.onload = function () {
  var element = document.querySelector('.testClass');
  var cssContent = window.getComputedStyle(element, '::after').content;
  cssContent = cssContent.replace(/^["']|["']$/g, ''); // Strip the quotes
  alert(testID.innerText + cssContent);
}
</script>
</head>
<body>
  <div id="testID" class="testClass">Hello</div>
</body>
</html>

    Note that you can change content="IE=9" to content="IE=11" to get full IE 11 capabilities. If you don't need any of theHTA:Application settings then that's a simple and worthwhile change. If you need both the HTA:Application settings and IE 11 capabilities, that can be achieved by breaking the script into two parts like this:

    Example2.hta

    <meta http-equiv="X-UA-Compatible" content="IE=9">
<HTA:Application
  Navigable=yes
  ContextMenu=no
  Icon="magnify.exe"
>
<script language="JScript">
x = 800; y = 600;
window.resizeTo(x,y);
window.moveTo ((screen.availWidth - x)/2, (screen.availHeight - y)/2);
location.href = "Example2.htm";
</script>

    Example2.htm

    <!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" http-equiv="X-UA-Compatible" content="IE=11">
<style>
  .testClass::after {
    content:" world";
  }
</style>
<script language="JScript">
window.onload = function () {
  var element = document.querySelector('.testClass');
  var cssContent = window.getComputedStyle(element, '::after').content;
  cssContent = cssContent.replace(/^["']|["']$/g, ''); // Strip the quotes
  alert(testID.innerText + cssContent);
}
</script>
</head>
<body>
  <div id="testID" class="testClass">Hello</div>
</body>
</html>