Question

有没有一种简单的方法可以通过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的网站上中断。

非常感谢您的任何想法！

Answer 1

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

Answer 2

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

Answer 3

@ chris166的一个稍微更犹太的版本建议是创建一个特殊的CSS规则，它将目标元素的必要样式属性清零。这样，您只需将适当的类（在此示例中为“零”）添加到元素中，CSS / browser magic将处理其余内容（在此示例中，我们将重置填充）。

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

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

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

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

Answer 5

由于它有一个ID，你可以使用#newdiv-header给出你想要的任何值。

如果您正在使用CMS或无法影响应用样式表的顺序，您可以使用！important。

Answer 6

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

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

至少对于你的问题，在jQuery中选择和取消隐藏div是很容易的。我愿意打赌你的代码也可以合理地直接实现。

哎呀，你甚至可以只运行一个jQuery片段来完成这个任务。

Answer 7

如果它必须能够在任何页面上进行，那么您要么必须重置大量的东西，要么将它放在一个框架中。但由于您说框架不可接受，您可以使用Firebug在您自己的沙箱环境中获取div计算样式的列表。

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

怎么能“unstyle”一个div html元素？

7 个答案: