当前位置：文江博客话题详情

新<风格>元素在 IE 中不起作用

发布于 2024-12-19 17:46:05 字数 913 浏览 2 评论 0 原文

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

你能建议一下吗？

非常感谢！

原文

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!

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

别把无礼当个性 2024-12-26 17:46:05

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

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");
});

回复收藏 0 原文

眼泪也成诗 2024-12-26 17:46:05

为什么不只是

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

Why not just

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

回复收藏 0 原文

后来的我们 2024-12-26 17:46:05

请参阅 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);

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

回复收藏 0 原文

梦情居士 2024-12-26 17:46:05

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

附加到 > 和

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

回复收藏 0 原文

妥活 2024-12-26 17:46:05

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

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

或者

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

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

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

回复收藏 0 原文

~没有更多了~

关于作者

花开浅夏

暂无简介

文章

27 人气

关注发私信

友情链接

文江博客

新<风格>元素在 IE 中不起作用

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

评论（5）

关于作者

相关话题

热门标签

推荐作者

牛↙奶布丁

COSO

落叶

暗地喜欢

qq_i8qOEG

qq_Wl4Sbi

友情链接

新<风格>元素在 IE 中不起作用

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

评论（5）

关于作者

相关话题

热门标签

推荐作者

牛↙奶布丁

COSO

落叶

暗地喜欢

qq_i8qOEG

qq_Wl4Sbi

友情链接

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。