CODEWITHSUNDEEP
javascriptjqueryhtmlcssstylesheet
Kris Van den Bergh
Kris Van den Bergh

Reputation: 1152

New <style> element not working in IE

I currently have an HTML page that has a grey BODY background. Now I would like to overwrite this and change this to white using Javascript. I also would like to change some other elements' padding and margin. I try to accomplish this using the innerHTML property.

The thing is everything is working, apart from the newly introduced element, which is not applied in IE7 or IE8. It does work in FireFox however. 

        <script>
        // if using jQuery
        $(document).ready(function() { 
        document.body.innerHTML = '
    <style type="text/css"> 
      body { 
        background-color: #FFFFFF 
        !important; } 
        #todayBirthdays, #weekendBirthdays, #noBirthdays, #todayJubileums, #weekendJubileums { 
padding: 0 !important; 
        margin: 0 !important; 
        }
    </style>
            <div style="text-align: left; background-color: #FFFFFF">' + 
        document.getElementById('WebPartctl00_SPWebPartManager1_g_7118b319_c5b0_4214_a46d_27131866cde3').innerHTML + 
        '</div>';`
                 });
            </script>

Can you please advise?

Many thanks!

Upvotes: 0

Views: 321

Answers (5)

CBRRacer
CBRRacer

Reputation: 4659

If you are stuck on adding in an inline style which is what you asked then use the following:

 $("<style type=\"text/css\"> body{background-color: #FFFFFF;} #todayBirthdays, #weekendBirthdays, #noBirthdays, #todayJubileums, #weekendJubileums { padding: 0 !important; margin: 0 !important;} </style>").appendTo("Head");

This will append your styling to the head element of the document. However in reality the better way to go if you are going to use jQuery or javascript is to just change the values of the background.

document.getElementByTagName(body).attribute(background-color)="#FFFFFF";

OR

$("body").css("background-color", "#FFFFF");

Upvotes: 0

Brad Christie
Brad Christie

Reputation: 101604

<html>
  <head>
    <style type="Text/css">
      body { background-color: #AAA; }
    </stye>
  </head>
  <body>
    <script type="text/javascript">
      var style = document.createElement('style');

      style.innerHTML = 'body { background-color: #F0F; }';
      // add any other styles inside this style element

      document.getElementsByTagName('head')[0].appendChild(style);
    </script>
 </body>

Demo of appending to the <body> and the <head>

Upvotes: 0

mrtsherman
mrtsherman

Reputation: 39872

See the CSS property of jQuery and also the addclass method. This is much easier than what you are doing!

$('body').css( { backgroundColor: 'value1'  } );
$('#todayBirthdays, #weekendBirthdays, #noBirthdays, #todayJubileums, #weekendJubileums').css( { padding: 'valuex', margin: 'valuey' } );

Although I think you should be using addClass instead.

.myClass { /* Some styling */ }   

$('#x, #y, #z').addClass(myClass);

Upvotes: 1

Marc B
Marc B

Reputation: 360662

Why not just

$('body').css('background-color', '#fff');
$('#todayBirthdays, #weekendBirthdays, #noBirthdays, #todayJubileums, #weekendJubileums').css('padding', 0).css('margin', 0);

Upvotes: 2

Michael Berkowski
Michael Berkowski

Reputation: 270607

The <style> tag is only valid inside the <head>, though some browsers may respect it in other places. If you want to change the body background or other properties with a script, use the appropriate .css() method in jQuery.

$(document).ready(function() { 
    $("body")css("backgroundColor", "#FFFFFF");
    $("#todayBirthdays,#weekendBirthdays,#noBirthdays,#todayJubileums,#weekendJubileums").css("margin", "0");
});

Upvotes: 5

Related Questions