如何使用 jQuery 在 IE6 中选择带有样式标签的元素答案

【问题标题】：How to select elements with a style tag in IE6 with jQuery如何使用 jQuery 在 IE6 中选择带有样式标签的元素
【发布时间】：2011-05-11 19:07:36
【问题描述】：

我们有一个喜欢插入内联样式的 CMS，我编写了一些删除内联样式的代码，添加了一个类并将样式属性的内容重写为头部的样式标记。

示例 HTML

<html>
<head>
    <title>Title</title>
</head>
<body>
    <div id="container">
        <p style="width: 50%;">Blah blah blah</p>
        <p style="font-weight: bold;">Even more blah blah blah</p>
        <p>Can I get some blah blah blah</p>
        <p>Ooo Ahh blah blah blah</p>
    </div>
</body>
</html>

jQuery 函数

$.each($('#container [style]'), function(index, el){
    var cssText = el.style.cssText;
    var className = "auto-class-" + index;
    $(el).removeAttr("style");
    $(el).addClass(className);
    $("<style type='text/css'> ." + className + "{" + cssText + "} </style>").appendTo("head");
})

所需的结果 HTML

<html>
<head>
    <title>Title</title>
    <style type="text/css"> .auto-class-1 { width: 50%; } </style>
    <style type="text/css"> .auto-class-2 { font-weight: bold; } </style>
</head>
<body>
    <div id="container">
        <p class="auto-class-1">Blah blah blah</p>
        <p class="auto-class-2">Even more blah blah blah</p>
        <p>Can I get some blah blah blah</p>
        <p>Ooo Ahh blah blah blah</p>
    </div>
</body>
</html>

我所有的好浏览器都按预期工作，但在 IE6 中，jQuery [style] 选择器似乎抓取了 #container 内的所有元素。所以你会得到以下结果。

IE6 中的结果 HTML

<html>
<head>
    <title>Title</title>
    <style type="text/css"> .auto-class-1 { width: 50%; } </style>
    <style type="text/css"> .auto-class-2 { font-weight: bold; } </style>
    <style type="text/css"> .auto-class-3 { } </style>
    <style type="text/css"> .auto-class-4 { } </style>
</head>
<body>
    <div id="container">
        <p class="auto-class-1">Blah blah blah</p>
        <p class="auto-class-2">Even more blah blah blah</p>
        <p class="auto-class-3">Can I get some blah blah blah</p>
        <p class="auto-class-4">Ooo Ahh blah blah blah</p>
    </div>
</body>
</html>

在上面的示例中，这不会导致任何问题，但在我们的网站上，任何给定页面上都有超过 300 个 DOM 节点，这会造成混乱。

问题是如何在 IE6 中只选择具有样式属性的 DOM 节点。

还有一种简单的方法可以将所有规则写入一个样式标签，而不是为每个规则单独设置一个样式标签。

【问题讨论】：

为什么要用 jQuery 将内联样式移动到单独的 <style> 元素中？你有什么收获？
请原谅我不知道... IE6 是浏览器吗？如果你关心 ie6，你也应该关心禁用 JS 的用户
我看到您的脚本是由 IE6 直译的，并且完全按照您的描述进行。您是否尝试过添加如下检查： if( $(className).attr('style') != "" ) {....do than....} 或其他某种预验证？跨度>
@thirtydot 用于打印样式表。内联样式推翻了它们，但样式标签很好。 @roXon 我们正在使用 JS 来逐步增强页面，没有它它仍然可以工作。 IE6 仍然是这里员工的标准浏览器。（嘘）。我会尝试一下预验证的想法，谢谢。
如果你对你的代码感到满意，而且只需要ie6，你可以将一些相关的更改附在： if ($.browser.msie && $.browser.version.substr(0,1) == 6){ ...你的ie6修改在这里...}

标签： jquery css internet-explorer-6

【解决方案1】：

这不是对你提出的具体问题的回答，但这是我认为你应该做的。

你在评论中说：

它用于打印样式表。这内联样式会否决它们，但是样式标签很好。

您正在使用的解决方案（将内联样式移动到 <style> 元素）不是很优雅。

最好将!important 添加到打印样式表中的每个声明中。

body {
    color: #444 !important;
    padding: 0 !important;
    margin: 0 !important;
}
#menu {
    display: none !important;
}

是的，这很丑陋，但它比基于 JavaScript 的解决方案干净得多。

如果您想了解一些背景信息：

见：http://css-tricks.com/specifics-on-css-specificity/

!important 值附加了一个 CSS 财产价值是自动赢的。 它甚至覆盖来自标记。 !important 的唯一方法值可以被覆盖另一个 !important 规则稍后声明在 CSS 中并且具有相同或出色的否则为特异性值。

【讨论】：

@roXon：我不明白你的评论。我的方法在 IE6 中可以正常工作。
@thirtydot 猜猜看，没错，如果样式已经内联设置，IE6 会忽略打印样式表中的 !important，所以虽然我同意这似乎是一个更好的解决方案，但它不适用于这种情况。 css-tricks.com/override-inline-styles-with-css
@Tom Styles：使用 IE6 进行测试：fiddle.jshell.net/thirtydot/f6m5C/show/light - 我刚刚做了（使用 IE6），屏幕上是 red，打印预览上是 blue。我实际上不能从我的 IE6 打印，但打印预览应该是一样的。所以，我的回答确实似乎有效。
@Tom Styles：另外，您链接到的那篇文章不是我们在这里讨论的内容。这就是说div[style] 由于使用了属性选择器（在 IE6 中不受支持），因此在 IE6 中不起作用。但是，您不需要 div[style] 覆盖内联样式； Chris Coyier 终于在这里注意到了这一点：css-tricks.com/override-inline-styles-with-css/…
@thirtydot @Tom ：好吧，我原谅我的非建设性评论。毕竟似乎是+1建议。我给了它。在打印样式优化的手段。汤姆，考虑一下这个答案并尝试修复 ie6 的空样式过多。