Fatal编程技术网
  • javascript/
  • Javascript “一个人怎么能”；“取消样式”；一个divhtml元素？

Javascript “一个人怎么能”；“取消样式”；一个divhtml元素？

javascript html css

Javascript “一个人怎么能”；“取消样式”；一个divhtml元素？,javascript,html,css,stylesheet,Javascript,Html,Css,Stylesheet,有没有一种简单的方法可以通过CSS或javascript或其他方式来获取div并使其不继承任何样式 我正在创建一个bookmarklet，它向网站添加一个标题。它修改DOM如下： var bodycontent = document.body.innerHTML; document.body.innerHTML = ''; var header = document.createElement('div'); var bodycontainer = document.createElement

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

我正在创建一个bookmarklet，它向网站添加一个标题。它修改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>


…最初的头像。。。
我的内容
…document.body.innerHTML的原始内容。。。
所有的样式都是适当的，所以所有的东西都是可见的，等等。问题是原始页面的样式表会影响我的标题的外观。我会使用frames和/或iframe，但这在实现framestring的站点上会中断

非常感谢您的任何想法

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

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

因为它有一个ID，所以您可以使用#newdiv header给出您想要的任何值

如果您使用的是CMS或其他无法影响样式表应用顺序的东西，那么您可以使用！重要。

对@chris166的建议有一个更为洁净的版本，即创建一个特殊的CSS规则，将目标元素的必要样式属性归零。这样，您只需将适当的类（本例中为“零”）添加到元素中，CSS/browser magic将处理其余部分（在本例中，我们将重置填充）

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

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

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

至少对于您的问题，在jQuery中选择并取消对div的序列化是一个简单的过程。我敢打赌，您的代码实现起来也相当简单

见鬼，您甚至可以只运行jQuery的一个片段来完成这项任务。

让我先说一下，以下所有内容都是纯空气代码：）

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

本网站介绍相关API：

编辑： 重复这个想法，我把一些测试代码放在一起，以确保它工作。我把它包括在下面

我还发现以下网站很有用：

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

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);
}

for（var i=0；i
这是用来测试它的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>


试验
.测试{
背景色：红色；
边框：黑色实心1px；
}
这是一些可能足够长的文本，可以换行。
测试2
对于（var i=0；i
如果它必须能够在任何页面上显示，则您必须重置大量内容或将其放入框架中。但由于您说框架是不可接受的，所以可以使用Firebug在您自己的沙箱环境中获取
div
的计算样式列表

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

问题是，由于这需要能够在任何给定页面上运行，因此我需要重置的css规则数量惊人地多，hugei尝试使用javascript在所有document.getElementById（'newdiv-header'）中循环。设置样式并将所有内容设置为“”，但没有成功。。。你知道一种自动化你的建议的方法吗？我真的无法手动执行此操作。将其设置为“”不会将其重置为默认值。这可能是我唯一的求助方式。我犹豫不决的是，在显示任何内容之前，它将需要发生的请求数量增加了一倍——首先是脚本，然后是iframe targetit。它是一个bookmarklet，它不能修改每个页面的样式表。为什么不呢？我不是指物理上修改样式表文件。我的意思是使用JavaScript动态修改它。这看起来很有希望！我会试试这个，让你知道它是如何运行的。只需查找jQuery。。。它看起来很漂亮。看起来我又回到了这里。我已经阅读了jQuery，它真的非常棒——我已经迁移了我的大部分代码，它比以往任何时候都好。但是特别是关于这个问题，我如何运行jQuery的一个片段来完成这个任务呢这将使fashi中的div不具有样式 
<!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>