Question

我目前有一个灰色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>

你能告诉我吗？

非常感谢！

Answer 1

<style>标记仅在<head>内有效，但某些浏览器可能会在其他地方尊重它。如果要使用脚本更改正文背景或其他属性，请在jQuery中使用相应的.css()方法。

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

Answer 2

为什么不

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

Answer 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);

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

的演示

Answer 5

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

 $("<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");

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

5 个答案: