通过javascript检索网页的实际DOM/css状态_Javascript_Css_Dom_Firefox Addon

通过javascript检索网页的实际DOM/css状态

javascript css dom firefox-addon

通过javascript检索网页的实际DOM/css状态,javascript,css,dom,firefox-addon,Javascript,Css,Dom,Firefox Addon,正如您所知，web页面是html文件、一个或多个css文件和一个或多个javascript文件的联合体：前两个元素由浏览器解析，以生成DOM和其他对页面呈现有用的数据结构 Javascript文件由引擎执行，它们可以更改DOM或与css相关的数据结构的值，因此，在执行Javascript后，网页的“实际状态”可以不同于原始html和css代码静态描述的状态我需要开发一个firefox插件，它可以获取网页的“实际状态”，并将其存储到磁盘，作为一个html+css文件由于html文件非常简单，我

正如您所知，web页面是html文件、一个或多个css文件和一个或多个javascript文件的联合体：前两个元素由浏览器解析，以生成DOM和其他对页面呈现有用的数据结构

Javascript文件由引擎执行，它们可以更改DOM或与css相关的数据结构的值，因此，在执行Javascript后，网页的“实际状态”可以不同于原始html和css代码静态描述的状态

我需要开发一个firefox插件，它可以获取网页的“实际状态”，并将其存储到磁盘，作为一个html+css文件

由于html文件非常简单，我需要序列化DOM。我关心的是css：我可以遍历DOM并为每个元素获取样式表，但它将是速度非常慢，并生成未优化的css代码

让我们举个例子

我有以下html代码：

<html>
    <head>
         <title>Test</title>
         <link type="text/css" rel="stylesheet" href="style.css"  />
         <script type='text/javascript' src="changebackground.js" > </script>
    </head> 
    <body>
         <div  class="divclass" > 
            <form> 
                <h2>click to change the background</h2>
                <input type="button" value="version" onclick="changebg()" />
            </form>
         </div>
    </body>

changebackground有以下代码：

function changebg() {
     document.body.style.backgroundColor = 'black';
 }

显然，单击按钮后，背景颜色变为黑色。我的目标是编写一个附加组件，在进行此更改后，它将通过样式的修改返回css，即：

.divclass{
          margin: .5in; 
          height: 400px;
}

body{
      background-color: black;
      color: blueviolet;
}

有什么想法吗？

你实际上不需要遍历任何东西。内联样式已经是的一部分，因此您可以免费获得，例如：

elem.style.width = "100px";
elem.outerHTML == '<elem style="width: 100px;>";

您可能还希望序列化

在不太可能的情况下，脚本实际上会干扰外部样式表（

），您可以执行我在中描述的操作来获取当前的规则集。同样，内联样式（

和

样式=

属性）已经存在于

.outerHTML

中

编辑：您现在所问的是不可能的，因为这不是内联样式的工作方式。考虑下面的HTML片段：

<div>first div</div>
<div>second div</div>

这将导致第一个div具有内联样式：

<div style="background: none repeat scroll 0% 0% black;">first div</div>
<div>second div</div>

first div
第二组

这条规则会是什么样子？

div{background:black；}

显然是错误的，因为这会影响所有div

您可以生成新的类和/或ID，但是您需要操作和存储DOM，并且可以首先使用我的原始答案。

恐怕您没有抓住要点。您的解决方案返回了原始css值，但似乎没有通过javascript进行更改。我用一个示例更新了问题。我不要错过重点…你基本上改变了你的问题。编辑了我的答案以反映你的改变。但是Firebug似乎做了一些与我的意图相似的事情，不是吗？不，Firebug不是。如果你指的是Firebug样式编辑器，那么请重新阅读我的问题中讨论外部CSS的部分，因为样式编辑器（大部分）就是这样做的做：扰乱外部规则。

<div>first div</div>
<div>second div</div>

document.querySelector("div").style.background = "black";

<div style="background: none repeat scroll 0% 0% black;">first div</div>
<div>second div</div>