{"id":208,"date":"2007-09-19T15:19:16","date_gmt":"2007-09-19T20:19:16","guid":{"rendered":"\/cgi\/wp\/?p=208"},"modified":"2007-09-19T15:19:16","modified_gmt":"2007-09-19T20:19:16","slug":"how-to-reference-a-css-class-with-javascript","status":"publish","type":"post","link":"http:\/\/williamsportwebdeveloper.com\/cgi\/wp\/?p=208","title":{"rendered":"How To Reference A CSS Class With JavaScript"},"content":{"rendered":"<div class=\"entry\">Some of the CSS topics in my help file were not displaying properly due to a  problem with background image urls in CSS. This problem only appears in the Help  2.0 version of help collections for the Microsoft Document Explorer. I was  unable to find any mention of this problem online because few people are doing  anything fancy with Help 2.0.<\/p>\n<p>I had to find a way to reference the div classes using JavaScript so I could  set the background images via code. This proved to be tricky so I will share my  code below. It has solved most of my problems in my help topics that illustrate  CSS techniques:<\/p>\n<p><code>var divTags = document.getElementsByTagName('div');<br \/>\nfor(i = 0; i  < divTags.length; i++)\n{\nif (divTags[i].className ==  \"sidebox\")\n{\ndivTags[i].style.background = \"url(sbbody-r.gif) no-repeat  bottom right\";\n}\nif (divTags[i].className ==  \"boxhead\")\n{\ndivTags[i].style.background = \"url(sbhead-r.gif) no-repeat  top right\";\n}\nif (divTags[i].className ==  \"boxbody\")\n{\ndivTags[i].style.background = \"url(sbbody-l.gif) no-repeat  bottom  left\";\n}\n}\ndocument.getElementsByTagName('h2')[0].style.background =  \"url(sbhead-l.gif) no-repeat top left\";<\/code><\/div>\n","protected":false},"excerpt":{"rendered":"<p>Some of the CSS topics in my help file were not displaying properly due to a problem with background image urls in CSS. This problem only appears in the Help 2.0 version of help collections for the Microsoft Document Explorer. &hellip; <a href=\"http:\/\/williamsportwebdeveloper.com\/cgi\/wp\/?p=208\">Continue reading <span class=\"meta-nav\">&rarr;<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[9,11],"tags":[],"_links":{"self":[{"href":"http:\/\/williamsportwebdeveloper.com\/cgi\/wp\/index.php?rest_route=\/wp\/v2\/posts\/208"}],"collection":[{"href":"http:\/\/williamsportwebdeveloper.com\/cgi\/wp\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/williamsportwebdeveloper.com\/cgi\/wp\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/williamsportwebdeveloper.com\/cgi\/wp\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/williamsportwebdeveloper.com\/cgi\/wp\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=208"}],"version-history":[{"count":0,"href":"http:\/\/williamsportwebdeveloper.com\/cgi\/wp\/index.php?rest_route=\/wp\/v2\/posts\/208\/revisions"}],"wp:attachment":[{"href":"http:\/\/williamsportwebdeveloper.com\/cgi\/wp\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=208"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/williamsportwebdeveloper.com\/cgi\/wp\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=208"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/williamsportwebdeveloper.com\/cgi\/wp\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=208"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}