新的 <style> 元素在 IE 中不起作用答案

【问题标题】：New <style> element not working in IE新的 <style> 元素在 IE 中不起作用
【发布时间】：2011-12-05 16:03:37
【问题描述】：

我目前有一个带有灰色 BODY 背景的 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>

你能建议吗？

非常感谢！

【问题讨论】：

您是否考虑过使用 DOM 更改背景和其他样式，而不是尝试重建整个文档的 HTML？
很可能是我见过的最好的代码行 -> document.getElementById('WebPartctl00_SPWebPartManager1_g_7118b319_c5b0_4214_a46d_27131866cde3')
爱上 Sharepoint :)

标签： javascript jquery html css stylesheet

【解决方案1】：

<style> 标签仅在<head> 内有效，尽管某些浏览器可能在其他地方尊重它。如果您想通过脚本更改正文背景或其他属性，请在 jQuery 中使用适当的.css() 方法。

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

【讨论】：

迈克尔，感谢您的反馈。正确的解决方案是 $('body').css('cssText', 'background-color: #ffffff !important');顺便说一句，因为我需要强制背景颜色！

【解决方案2】：

为什么不直接

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

【讨论】：

谢谢马克！像魅力一样工作。

【解决方案3】：

参见 jQuery 的 CSS 属性以及 addclass 方法。这比你做的要容易得多！

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

虽然我认为您应该改用 addClass。

.myClass { /* Some styling */ }   

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

【讨论】：

【解决方案4】：

<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>的演示

【讨论】：

（如果您确实想知道如何添加新样式标签）

【解决方案5】：

如果您坚持添加您所要求的内联样式，请使用以下内容：

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

这会将您的样式附加到文档的头部元素。但实际上，如果您要使用 jQuery 或 javascript，更好的方法是更改背景的值。

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

或

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

【讨论】：