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>

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

非常感谢您的任何想法！

4

7 回答 7

4

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

于 2009-07-28T18:12:28.600 回答
3

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

于 2009-07-28T18:13:11.390 回答
2

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

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

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

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

于 2009-07-28T18:54:50.947 回答
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>
于 2009-07-28T19:05:28.493 回答
0

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

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

于 2009-07-28T19:12:51.863 回答
0

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

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

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

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

于 2009-07-28T18:58:17.307 回答
0

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

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

于 2009-07-28T18:18:28.150 回答