{"id":66633,"date":"2006-08-22T15:31:00","date_gmt":"2006-08-22T15:31:00","guid":{"rendered":"https:\/\/blogs.technet.microsoft.com\/heyscriptingguy\/2006\/08\/22\/how-can-i-dynamically-change-the-background-color-of-an-hta\/"},"modified":"2006-08-22T15:31:00","modified_gmt":"2006-08-22T15:31:00","slug":"how-can-i-dynamically-change-the-background-color-of-an-hta","status":"publish","type":"post","link":"https:\/\/devblogs.microsoft.com\/scripting\/how-can-i-dynamically-change-the-background-color-of-an-hta\/","title":{"rendered":"How Can I Dynamically Change the Background Color of an HTA?"},"content":{"rendered":"

\"Hey, \n

Hey, Scripting Guy! How can I dynamically change the background color of an HTA?

— CN<\/P>\"Spacer\"\"Hey,\"Script<\/A> \n

Hey, CN. You know, last summer (Fourth of July, 2005) an errant firework shot by a neighbor accidentally caught one of the Scripting Guys\u2019 garage on fire. (Because it was shot by a neighbor we assume it was an accident. Had it been shot by one of the other Scripting Guys, well \u2026.) Although no one was hurt, the garage was totaled. Forced to rebuild said garage from scratch, the Scripting Family decided to turn it into a family room. (Admittedly, they don\u2019t like<\/I> having to park the Rolls Royce outside instead of in the garage. But hey, if the Rolls gets wet they\u2019ll just buy a new one.)<\/P>\n

We won\u2019t bother recapping the saga of the Contractor Who Couldn\u2019t Be Bothered to Contract; suffice to say that the job that would be done \u201cin three weeks, guaranteed\u201d took six months. After six months of lethargy, punctuated by an occasional hour or two of work, the very last thing that needed to be done was to paint the interior. \u201cWhat color would you like us to paint it?\u201d asked the contractor. \u201cAnd remember, we have to paint everything the same; the insurance company will only pay for one color.\u201d<\/P>\n

\u201cIn that case we\u2019ll take white,\u201d replied the Scripting Guy.<\/P>\n

\u201cWhat shade of white?\u201d asked the contractor. <\/P>\n

\u201cUm, I don\u2019t know,\u201d said the Scripting Guy. \u201cJust plain old white. Any shade of white will be fine.\u201d<\/P>\n

A couple weeks later the Scripting Guy came home from work to discover that \u2013 miracle of miracles \u2013 the painter (Big Larry) had actually come out and painted the family room. That was the good news. The bad news: he painted the entire room \u2013 ceiling, walls, door frames, you name it \u2013 yellow.<\/P>\n

Not being much of an artist, the Scripting Guy had had no idea that yellow was a shade of white. Which, apparently, it is.<\/P>\n

The moral of the story: a color-changing script would have come in pretty handy right about then. Unfortunately, the Scripting Guy didn\u2019t have a color-changing script that would work on a family room; all he had was a color-changing script that would work on an HTML Application (HTA):<\/P>

<SCRIPT LANGUAGE=”VBScript”>\n    Sub TestSub\n        document.body.bgColor=”red” \n    End Sub\n<\/SCRIPT><\/p>\n
<body>\n    <input id=runbutton type=”button” value=”Run Script” name=”run_button” onClick=”TestSub”>\n<\/body>\n<\/PRE>\n
As you can see, there really isn\u2019t much to this HTA. The user interface, such as it is, consists solely of a button labeled Run Script<\/B>; when you click that button, it triggers a subroutine named TestSub:<\/P>
<input id=runbutton type=”button” value=”Run Script” name=”run_button” onClick=”TestSub”>\n<\/PRE>\n
And what does this subroutine do? Why, it changes the background color of the HTA to red:<\/P>
Sub TestSub\n    document.body.bgColor=”red” \nEnd Sub\n<\/PRE>\n
Pretty simple, huh? All we\u2019re doing is grabbing the document.body<\/B> object and then setting the value of the bgColor<\/B> property to red. Would you rather set the background color to aquamarine? No problem:<\/P>
document.body.bgColor=”aquamarine”\n<\/PRE>\n
How about lavenderblush (you know, you can never go wrong with lavenderblush):<\/P>
document.body.bgColor=”lavenderblush”\n<\/PRE>\n
You can even \u2013 alas \u2013 set the background color to yellow:<\/P>
document.body.bgColor=”yellow”\n<\/PRE>\n\n<\/THEAD>\n\n\n
\n
Note<\/B>. Looking for a list of all the color values you can pass, by name, to the bgColor property? Look no further than the HTML and DHTML Reference<\/B><\/A> on MSDN.<\/P><\/TD><\/TR><\/TBODY><\/TABLE>\n
<\/DIV>\n
Incidentally, CN, you noted in your email that you tried changing the background color by modifying the InnerHTML property of the HTA body; however, you weren\u2019t able to get that to work. Why not? To answer that question, let\u2019s take a look at a simple little <body> tag, one that sets the background color to red:<\/P>
<body bgColor=”red”>\n    <b>This is the body of the document.<b>\n<\/body>\n<\/PRE>\n
As you can see, you specify the background color as part of the <body> tag itself. Is that important? You bet it is: that\u2019s because the InnerHTML property only applies (in this case) to the stuff that comes between<\/I> the beginning and ending <body> tags. Our beginning tag is this:<\/P>
<body bgColor=”red”>\n<\/PRE>\n
Our ending tag is this:<\/P>
<\/body>\n<\/PRE>\n
That means that the InnerHTML property will affect only this portion of the HTA:<\/P>
<b>This is the body of the document.<b>\n<\/PRE>\n
Using the InnerHTML property we can add buttons and check boxes and images and do all sorts of fun things. However, we can\u2019t change the background color, assign a background picture, or do anything else to the <body> tag itself. We can do that only by directly accessing the properties of the document.body object. That\u2019s why modifying the InnerHTML property didn\u2019t do anything to change the background color.<\/P>\n\n<\/THEAD>\n\n\n
\n
Note<\/B>. As a matter of fact, there is<\/I> a property named OuterHTML, a property that can be used to completely replace an HTML object, including the starting and ending tags. However, the document.body object doesn\u2019t support the OuterHTML property.<\/P><\/TD><\/TR><\/TBODY><\/TABLE>\n
<\/DIV>\n
As long as we\u2019re on the subject, here\u2019s a nifty little HTA. We won\u2019t explain the code today, but when you click the button in this<\/I> HTA a color picker dialog box appears on screen. Select a color, click OK<\/B>, and the background color of the HTA will change to the color you selected in the dialog box (really; give it a try and see for yourself). Here\u2019s the HTA code:<\/P>
<SCRIPT LANGUAGE=”VBScript”>\n    Sub TestSub\n        intColor=dlgHelper.ChooseColorDlg    \n        If intColor <> 0 then\n            document.body.bgColor=intColor\n        End If\n    End Sub\n<\/SCRIPT><\/p>\n
<body>\n    <OBJECT id=dlgHelper CLASSID=”clsid:3050f819-98b5-11cf-bb82-00aa00bdce0b” width=”0px” height=”0px”><\/OBJECT> \n    <input id=runbutton type=”button” value=”Run Script” name=”run_button” onClick=”TestSub”>\n<\/body>\n<\/PRE>\n
And here\u2019s where you can find more information on the Dialog Helper object<\/B><\/A> that makes this all possible.<\/P>\n
As for the Scripting Guy\u2019s family room, he didn\u2019t bother to tell the contractor that yellow wasn\u2019t actually a shade of white; having taken six months to finally get the job done he had no desire to wait another six months for Big Larry to get around to repainting the room. Instead, the Scripting Guy left part of the room yellow, painted a couple walls a reddish-color, and painted the trim and a few odds-and-ends white (the real<\/I> white). Surprisingly enough, it turned out really nice, which means that this story has a happy ending.<\/P>\n
Or at least as happy an ending as you can get when you\u2019re dealing with contractors and insurance jobs.<\/P>\n\n<\/THEAD>\n\n\n
\n
More Information.<\/B> For more on creating HTML Applications, see the HTA Developers Center<\/B><\/A>.<\/P><\/TD><\/TR><\/TBODY><\/TABLE><\/p>\n","protected":false},"excerpt":{"rendered":"
Hey, Scripting Guy! How can I dynamically change the background color of an HTA?— CN Hey, CN. You know, last summer (Fourth of July, 2005) an errant firework shot by a neighbor accidentally caught one of the Scripting Guys\u2019 garage on fire. (Because it was shot by a neighbor we assume it was an accident. […]<\/p>\n","protected":false},"author":595,"featured_media":87096,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[1],"tags":[3,4,5,30],"class_list":["post-66633","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-scripting","tag-scripting-guy","tag-scripting-techniques","tag-vbscript","tag-web-pages-and-htas"],"acf":[],"blog_post_summary":"
Hey, Scripting Guy! How can I dynamically change the background color of an HTA?— CN Hey, CN. You know, last summer (Fourth of July, 2005) an errant firework shot by a neighbor accidentally caught one of the Scripting Guys\u2019 garage on fire. (Because it was shot by a neighbor we assume it was an accident. […]<\/p>\n","_links":{"self":[{"href":"https:\/\/devblogs.microsoft.com\/scripting\/wp-json\/wp\/v2\/posts\/66633","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/devblogs.microsoft.com\/scripting\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/devblogs.microsoft.com\/scripting\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/scripting\/wp-json\/wp\/v2\/users\/595"}],"replies":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/scripting\/wp-json\/wp\/v2\/comments?post=66633"}],"version-history":[{"count":0,"href":"https:\/\/devblogs.microsoft.com\/scripting\/wp-json\/wp\/v2\/posts\/66633\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/scripting\/wp-json\/wp\/v2\/media\/87096"}],"wp:attachment":[{"href":"https:\/\/devblogs.microsoft.com\/scripting\/wp-json\/wp\/v2\/media?parent=66633"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/scripting\/wp-json\/wp\/v2\/categories?post=66633"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/scripting\/wp-json\/wp\/v2\/tags?post=66633"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}