一个 div html 元素如何“取消样式”？答案

【问题标题】：how can one "unstyle" a div html element?一个 div html 元素如何“取消样式”？
【发布时间】：2009-07-28 18:09:01
【问题描述】：

有没有一种通过 CSS 或 javascript 或其他任何东西的简单方法来获取 div 并使其不继承任何样式？

我正在创建一个向网站添加标题的书签。它修改 DOM 如下：

var bodycontent = document.body.innerHTML;
document.body.innerHTML = '';

var header = document.createElement('div');
var bodycontainer = document.createElement('div');
header.setAttribute('id', 'newdiv-header');
bodycontainer.setAttribute('id','newdiv-bodycontainer');

header.innerHTML = "MY STUFF";
bodycontainer.innerHTML = bodycontent;

document.body.appendChild(header);
document.body.appendChild(bodycontainer);

我们最终得到的结果是这样的：

<html>
 <head> ...original head stuff... </head>
 <body>
  <div id="newdiv-header"> MY CONTENT </div>
  <div id="newdiv-bodycontainer"> ...original content of document.body.innerHTML... </div>
 </body>
</html>

所有样式都适当，以便所有内容都可见，等等。问题是原始页面的样式表会影响我的标题的外观。我会使用框架和/或 iframe，但这会在实施 framebusting 的网站上中断。

非常感谢您的任何想法！

【问题讨论】：

标签： javascript html css stylesheet

【解决方案1】：

我唯一的想法是将每个相关的 CSS 属性设置为默认值（或您需要的任何值）。我不认为有一种方法可以防止将样式应用于单个 div。

【讨论】：

我尝试使用 javascript 循环遍历所有 document.getElementById('newdiv-header').style 并将所有内容设置为 '' 但它不起作用......你知道一种方法吗自动化你的建议？我真的不能手动尝试这样做
将其设置为 '' 不会将其重置为默认值。

【解决方案2】：

也许您可以插入 iframe 而不是 div。

【讨论】：

这可能是我唯一的办法。我的犹豫是它会使显示任何内容之前需要发生的请求数量增加一倍 - 首先是脚本，然后是 iframe 目标

【解决方案3】：

@chris166 建议的稍微更干净的版本是创建一个特殊的 CSS 规则，将目标元素的必要样式属性归零。这样，您只需将适当的类（在本例中为“零”）添加到元素，其余的由 CSS/浏览器魔法处理（在本例中，我们将重置填充）。

// in javascript
foo.className += ' zero'; // multiple classes (space seperated)

/* then in CSS */
.foo.zero { padding: 0px; }

此示例使用多个类 CSS 选择器来解决特定性问题，但是如果您需要 IE6 支持，您可能需要使用替代方法（即比与目标元素匹配的其他规则更具体的常规 CSS 规则）

【讨论】：

【解决方案4】：

让我先说以下所有内容都是纯空气代码:)

如果你从另一个方向攻击它呢？不要重置 div 中的所有样式，而是修改现有样式表，以便所有选择器都以 #newdiv-bodycontainer 的子项为目标。

本站讨论相关 API： http://www.javascriptkit.com/domref/stylesheet.shtml

编辑：重复这个想法，我整理了一些测试代码以确保它有效。我已经把它包括在下面了。

我还发现以下网站很有用：http://www.javascriptkit.com/dhtmltutors/externalcss2.shtml

警告：这不是生产代码。它不处理跨浏览器的不兼容问题（其中有很多），也不处理复合选择器，也不处理多个样式表。

for (var i = 0; i < document.styleSheets[0].cssRules.length; ++i) {
    var selector = document.styleSheets[0].cssRules[i].selectorText;
    var declaration = document.styleSheets[0].cssRules[i].style.cssText;

    document.styleSheets[0].deleteRule(i);
    document.styleSheets[0].insertRule('.test ' + selector + '{' + declaration + '}', i);
    alert(document.styleSheets[0].cssRules[i].selectorText);
}

这是用于测试它的 HTML。它在 Firefox 和 Chrome 中运行，但需要修改才能在 IE 中运行：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd" > 
<html>
<head>
<title>Test</title>

    <style type="text/css">
        .test {
            background-color:red;
            border: black solid 1px;
        }
    </style>
</head>
<body>
    <div class="test" style="width: 10em;">
        This is some text that is probably long enough to wrap.
        <div class="test test2">Test2</div>
    </div>

    <script language="javascript">
        for (var i = 0; i < document.styleSheets[0].cssRules.length; ++i) {
            var selector = document.styleSheets[0].cssRules[i].selectorText;
            var declaration = document.styleSheets[0].cssRules[i].style.cssText;

            document.styleSheets[0].deleteRule(i);
            document.styleSheets[0].insertRule('.test ' + selector + '{' + declaration + '}', i);
            alert(document.styleSheets[0].cssRules[i].selectorText);
        }
    </script>
</body>
</html>

【讨论】：

它是一个书签，他不能修改它所进行的每一页的样式表
为什么不呢？我的意思不是物理地修改样式表文件。我的意思是使用 JavaScript 来动态修改它。
这看起来很有希望！我会试试这个，让你知道它是怎么回事

【解决方案5】：

由于它有一个 ID，您可以使用 #newdiv-header 提供您想要的任何值。

如果您正在使用 CMS 或其他无法影响样式表应用顺序的工具，则可以使用 !important。

【讨论】：

问题在于，由于它需要能够在任何给定页面上运行，我需要重置的 css 规则数量非常庞大

【解决方案6】：

虽然这可能没有任何直接帮助，但如果时间和资源允许，将代码移至 jQuery 可能会更容易。

jQuery 可以更好地处理 HTML 元素以及用于与这些元素交互的常用函数。

至少对于您的问题，在 jQuery 中选择和取消样式化 div 是一件轻而易举的事。我敢打赌，您的代码实施起来也相当简单。

哎呀，你甚至可以只运行一个 jQuery 的 sn-p 来完成这个任务。

【讨论】：

刚刚查找了 jQuery... 它看起来很棒。 阅读教程
sigh 看起来我又回来了。我已经阅读了 jQuery，它真的非常棒——我已经迁移了我的大部分代码，而且它比以往任何时候都运行得更好。但特别是关于这个问题，如何我可以运行一个 jQuery 的 sn-p 来完成这个任务？
docs.jquery.com/Attributes/removeClass - 这应该以您正在寻找的方式取消 div 的样式。只需将 removeClass 放入基本 document.ready 中，您就应该用煤气做饭了。

【解决方案7】：

如果它必须能够在任何页面上显示，您要么必须重置大量内容，要么将其放入框架中。但既然你说帧是不可接受的，你可以使用 Firebug 在你自己的沙箱环境中获取div 的计算样式列表。

在 Firebug 中，检查元素。转到右侧窗格，然后选择“样式”旁边的下拉箭头。然后选择“显示计算样式”。确实有很多复制，但它解决了你的框架问题。

【讨论】：