如何“取消样式”一个div HTML元素？

Question

如何“取消样式”一个div HTML元素？

3

是否有一种简单的方式，通过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>

所有的内容都要适当地进行样式设计，以便所有东西都能够清晰可见等。问题在于原始页面的样式表会影响我的页眉外观。我想使用框架和/或内嵌框架，但这会在实施防框架破坏的网站上出现问题。非常感谢您提供的任何想法！

- Mala

7个回答

3

也许你可以使用iframe而不是div。

- jhurshman

这可能是我唯一的选择。我的犹豫在于它会使需要发生的请求数量加倍，先是脚本，然后是iframe目标。 - Mala

2

@chris166的建议稍微有些不合适，更好的方法是创建一个特殊的CSS规则，将目标元素所需的样式属性设为零。这样，您只需要向元素添加相应的类（例如本例中的“zero”），CSS /浏览器就会自动处理剩下的部分（在本例中我们将重置填充）。

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

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

这个例子使用了多个class CSS选择器来解决特定性问题，然而如果你需要支持IE6，你可能需要使用其他的方法（比如一个正常的CSS规则，它比匹配你目标元素的其他规则更具体）

- Jaysen Marais

1

首先我得说，以下所有内容都是纯粹的空气代码 :)

如果你从另一个方向来解决这个问题呢？不要重置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>

- AaronSieb

这是一个书签小程序，他无法修改每个页面的样式表。 - geowa4

为什么不呢？我并不是指直接修改样式表文件，而是使用JavaScript动态修改它。 - AaronSieb

这看起来非常有前途！我会尝试一下并告诉你结果如何。 - Mala

0

由于它有一个ID，您可以使用#newdiv-header来随意赋值。

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

- Zack Marrapese

问题在于，由于这需要能够在任何给定的页面上运行，我需要重置的CSS规则数量是惊人的庞大。 - Mala

0

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

jQuery对HTML元素的处理以及与这些元素交互所使用的常见函数有更好的处理能力。

至少对于您的问题，在jQuery中选择和取消样式化div非常简单。我敢打赌，您的代码也将相当简单地实现。

甚至，您甚至可以运行一个单独的jQuery片段来完成此任务。

- EvilChookie

刚刚查了一下jQuery...看起来真是太棒了。阅读教程 - Mala

叹气看来我又回到了这个问题。我已经研究了jQuery，它真的非常棒 - 我已经将我的大部分代码迁移到了它上面，并且它比以往任何时候都要好用。但是关于这个问题，我应该如何运行一段jQuery代码来完成这个任务呢？ - Mala

http://docs.jquery.com/Attributes/removeClass - 这应该以你想要的方式取消div的样式。只需将removeClass放在基本的document.ready中，你就可以轻松搞定了。 - EvilChookie

0

如果它必须能够在任何页面上使用，您要么需要重置很多内容，要么将其放入框架中。但是既然您说框架不可接受，您可以在自己的沙盒环境中使用Firebug来获取

的计算样式列表。

在Firebug中，检查该元素。转到右窗格，并选择“样式”旁边的下拉箭头。然后选择“显示计算样式”。这需要大量复制，但它解决了您的框架问题。

- geowa4

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- chris166 · Accepted Answer

我的唯一想法是将所有相关的CSS属性设置为默认值（或您需要的任何值）。我认为没有办法阻止样式被应用于单个div。