Html Question posted in
Some basic documentation can be found here.

Html – 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.

Tags:

2

Answers


  1. 0

    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.

    Yes-and-No….

    The problem with HTAs is that if you want to use any MSHTML/Trident features added since IE7’s IE9’s Standards Mode or later (e.g. IE11 Standards mode, Modern CSS (e.g. grid, flex) then it will break the <HTA:APPLICATION /> integration. Or – put in reverse: if you want to use the integration features of <HTA:APPLICATION /> (such as BORDER=thin and SHOWINTASKBAR=yes) then you cannot use anything beyond Windows XP-era IE6 Windows Vista IE7/IE8 features (and maybe IE9?).

    This is because (ironically?) due to IE’s backwards-compatibility: ever since IE5 came out in 1999 the IE dev team added support for new HTML/CSS/JS features only to new document-modes, so that the unholy mess of spaghetti code that makes IE4 behave the way it did could be kept as-is: in (the original) quirks-mode (and so not break any websites dependent on IE4’s quirks-mode rendering); whereas if a webpage ran in IE5-mode it would lose-out on IE4-render behaviour but opt-in to bugfixed CSS layout features; and this way-of-doing-things existed in some way or form in every subsequent version of IE through to the end in IE11.

    IE6, in 2001, was (to my knowledge) the last release of IE with support for HTA features (like <HTA:APPLICATION />) in its standards(-ish) mode. Now IE7 didn’t come out until Vista did, almost 6 years later, and by then HTAs were largely forgotten by everyone (except for nerds like me… and you), so by 2007, if you were wanting to run a HTA then odds are almost certain that the HTA was actually written sometime between 1999 and 2003 and so would have targeted an IE5 or IE6 document-mode, and – unless the HTA’s author had a Ziltoid-like gift for prescience to forsee HTML5 and IE7 back then – that HTA would not need to run in IE7’s Standards Mode – therefore IE7 – and IE8, IE9, IE10 and IE11 never brought-forward the old codebase that handled the <HTA:APPLICATION /> integration (well, technically they did, but IE7+’s support for HTAs in their Standards Modes it was the bare minimum to stop things from crashing, but it meant SHOWINTASKBAR="yes" et cetera simply wouldn’t work anymore.

    (Edit: Now that I think about it, I do remember using IE8-based HTAs in Windows 7 working fine – so maybe it was IE9 Standards Mode that broke HTA integration?)

    I do remember idly messing-around with HTAs in IE10 and IE11 just to see how badly things had gotten – and to compare them to the then-nascent (2013-ish) WebView-based platforms like Cordova/PhoneGap/Ripple – and I was susprised that I could get a HTA to work at all using IE11 in Windows 8/8.1 in Standards Mode, but all the shell and Windows integration features were broken, and I didn’t put any more effort in.

    That said, simply getting the innerText or innerHTML of a <style> element doesn’t require IE7+ features, so let’s give it a try… (note this does mean you can’t use querySelector, querySelectorAll, matches(), etc, as that was all added in IE8).

    I was wondering if the same can be done to pull css values like the one in the example

    …looks like you can, if you don’t mind writing HTML+CSS+JS like it’s 1998-2001:

    BTW, the main thing is to ensure you don’t use a <!DOCTYPE> or have a <meta http-equiv="x-ua-compatible" content="IE=edge"> because that will make the HTA host use MSHTML/Trident in IE11 Standards Mode, which breaks <HTA:APPLICATION />.

    • A quick way to tell if <HTA:APPLICATION /> is working or not is if you can see an inset border around the viewport but within the window’s nonclient area border: if it’s inset then it’s working; if it’s completely flat then that’s modern IE rendering.

    • Also, you can check document.documentMode and document.compatMode in script.

    Like so….

    With <HTA:APPLICATION /> integration:

    <html>
<head>
    <HTA:APPLICATION 
        ID="testApp"
        BORDER="thin"
        CAPTION="yes"
        SHOWINTASKBAR="yes"
        SINGLEINSTANCE="yes"
        SCROLL="no"
    />
    <style>
        .testCss::after {
            content: "I want to pull this with javascript";
        }
    </style>
</head>
<body>
</body>
<script language="javascript">

window.onload = function() {
    
    var headStyleEl = document.getElementsByTagName( 'style' )[0];
    window.alert( headStyleEl.innerText + "rnrnAlso: document.documentMode == " + document.documentMode + "rnrnAlso: document.compatMode == " + document.compatMode );
}

</script>
</html>

    Screenshot proof:

    enter image description here

    Without <HTA:APPLICATION /> integration, but with IE11 Standards Mode support:

    <!DOCTYPE html>
<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>
</body>
<script language="javascript">

window.onload = function() {
    
    var headStyleEl = document.getElementsByTagName( 'style' )[0];
    window.alert( headStyleEl.innerText + "rnrnAlso: document.documentMode == " + document.documentMode + "rnrnAlso: document.compatMode == " + document.compatMode );
}

</script>
</html>

    Screenshot proof:

    enter image description here

    Login or Signup to reply.
  2. 0

    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 settings in the HTA:Application 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>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search