Skip to main content

Changing Style tag content using JQuery & IE8

Generally you might not need/want to do this, in fact you’ll rarely change elements of ‘head’ tag using Java script. But this is for those who are left with no other choice. It is really simple, JQuery provides a methods ‘text() / html()’ which will allow you to change content of any DOM element. To change the ‘Style’ tag content we can use ‘text()’ method, sample code is provided below.

<html>
   <head>
      <style id="myStyles" type="text/css">
         .header {
            color: blue;
         }
      </style>
      <script type="text/javascript">
         $("#myButton").click(function(e) {
            $("#myStyles").text(".header { color: green }");
         });
      </script>
   </head>
   <body>
      <h2 class="header">My Page Heading</h2>
      <input type="button" id="myButton" value="Click Me"/>
   </body>
   </html>
Ideally you’d expect this code to work, but this code will not work in IE8; for some reason it seems you can not use ‘text()’ method to change ‘style’ tag contents in IE8. So work around for it - remove the ‘style’ completely and add it again with new content as shown below


<html>
   <head>
      <style id="myStyles" type="text/css">
         .header { color: blue; }
      </style>
      <script type="text/javascript">
         $("#myButton").click(function(e) {
            // $("#myStyles").text(".header { color: green }");
            var headerEl = $("#myStyles").parent();
            $("#myStyles").remove();
            $(headerEl).append("<style id='myStyles' type='text/css'> .header {color: green;}</style>");
         });
      </script>
   </head>
   <body>
      <h2 class="header">My Page Heading</h2>
      <input type="button" id="myButton" value="Click Me"/>
   </body>
</html>



To test follow this link: http://jsfiddle.net/tM96J/1/













Labels:































Comments











Post a Comment































Popular posts from this blog





















Simple Accordion using Java Script and CSS




























  Well you can find many online, but it's difficult to find one with out any dependent API. Most of the available accordions use other APIs for animation and other stuff. For those who just want accordion with out any other stuff, this one is the perfect one. It's very simple and you don't have to be a geek to understand it. Basic knowledge of Java script and CSS will do to understand how this works. In this article I'll take you through the steps of developing an accordion. Couple of minutes you are ready to write your own. Well then let's start developing one.    Layout of the HTML block looks something like the one below    Lets look at the CSS first which is very simple.  /** container styles **/    .ra-p, .ra-cp {     padding: 0 0 0.1em;    }    /**** heading styles ****/    .ra-p h2, .ra-cp h2 {      margin: 0px;      padding: 0.2em;      cursor: pointer;      color: #fff;      background-color: #3d80b0;    }    /**** collapsed heading styles ****/    .ra-cp h




















Post a Comment









Read more




























Hosting Multiple Domains In Tomcat




























  Tomcat  allows us to host multiple domains in one instance, using multiple ' Host ' tags. In this article I will explain how to do it on Tomcat. This is very simple configuration using ' Host ' tags in your server.xml . A novice can also understand this configuration very easily.  Before going into the details of the configuration first lets have a look at the ' Host ' tag, ' Context ' tag and ' Alias ' tags first.     <Host name="domain1" appBase="[application base]" autoDeploy="[true/false]"          unpackWARs="[true/false]">     <Alias>...</Alias>     <Context path="" docBase="" reloadable="[true/false]"/>    </Host>     First lets have a look at ' Alias ' tag. This tag is used to provide aliases for your actual domain. For example you have a domain called 'domain1.com', and you want to run the same application for 'www.do




















15 comments









Read more






























File Uploading Using Servlets, JSP and Commons File Upload API




























  I’ve seen many developers who are at the early stages of their career have problems with this topic and seen many posts in forums asking how to do it – File Uploading using Servlets, JSP!; this article will provide an example using Commons File Upload API. I tried to make the example as simple as possible, hope it helps those early birds. Example uses JSP to provide the pages with form where user can select the file to upload with other form fields, Commons File Upload API to process submitted form and read form fields separately, and Servlets as middle layer between JSP and Commons File Upload API, example also has ANT build script to generate the distributables. All the code can be downloaded, links to these resources are provided at the end of this post, lets get on with the example then.   The flow in this example is as depicted in the following picture.    As you can see, user selects the file to upload and provides normal form data as well, using "index.jsp" and submi




















17 comments









Read more