Новый элемент <style>не работает в IE - PullRequest
Новая
       1

Новый элемент <style>не работает в IE

0 голосов
/ 05 декабря 2011

В настоящее время у меня есть HTML-страница с серым фоном тела. Теперь я хотел бы переписать это и изменить его на белый, используя Javascript. Я также хотел бы изменить отступы и поля некоторых других элементов. Я пытаюсь сделать это, используя свойство innerHTML.

Дело в том, что все работает, кроме недавно введенного элемента, который не применяется в IE7 или IE8. Это работает в FireFox однако. 

        <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>

Не могли бы вы посоветовать?

Большое спасибо!

Ответы [ 5 ]

5 голосов
/ 05 декабря 2011

Тег <style> действителен только внутри <head>, хотя некоторые браузеры могут уважать его в других местах. Если вы хотите изменить фон тела или другие свойства с помощью скрипта, используйте соответствующий метод .css() в jQuery. 

$(document).ready(function() { 
    $("body")css("backgroundColor", "#FFFFFF");
    $("#todayBirthdays,#weekendBirthdays,#noBirthdays,#todayJubileums,#weekendJubileums").css("margin", "0");
});
2 голосов
/ 05 декабря 2011

Почему не просто 

$('body').css('background-color', '#fff');
$('#todayBirthdays, #weekendBirthdays, #noBirthdays, #todayJubileums, #weekendJubileums').css('padding', 0).css('margin', 0);
1 голос
/ 05 декабря 2011

См. Свойство CSS в jQuery, а также метод addclass . Это намного проще, чем то, что вы делаете! 

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

Хотя я думаю, вы должны использовать вместо этого addClass. 

.myClass { /* Some styling */ }   

$('#x, #y, #z').addClass(myClass);
0 голосов
/ 05 декабря 2011

Если вы застряли при добавлении во встроенном стиле, как вы и просили, используйте следующее: 

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

Это добавит ваш стиль к элементу head документа. Однако на самом деле лучший способ пойти, если вы собираетесь использовать jQuery или javascript, это просто изменить значения фона. 

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

OR 

$("body").css("background-color", "#FFFFF");
0 голосов
/ 05 декабря 2011 
<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>

Демонстрация добавления в <body> и <head>

...