0

使用 Javascript/jQuery，是否可以获取文档中给定元素的属性名称及其值以及 HTML 属性名称及其值。这与它们是否：

内联样式

<h1 style="font-weight="900">Heading 1</h1>

嵌入式

<style>
h1
{
font-weight: bold;
}
</style>

链接的

<link href="main.css" rel="stylesheet" type="text/css" media="all" />

进口的

 @import url("reset.css");

而且不管

  • 用户代理/浏览器（IE、FF、GC、AS、OP）
  • 以上应用的默认样式
  • 以上版本

好吧，可以启动 FF 中的 Firebug 或开发人员工具，以及其他 UA 中的类似工具，但它们缺乏一些能力。我正在寻找一种 jQuery 插件类型，其中元素显示在左侧，以上所有内容都显示在右侧（可能在 iframe 中？）。

我只是制作了一个文档（一个非常简单的可能只有一个元素 say ）并将它显示在浏览器的左侧，上面显示在右侧。

4

1 回答 1

3

您可以使用文档对象的 getComputedStyle() 方法和元素的属性字段：

var oDiv = document.getElementById("div1");
var css = document.defaultView.getComputedStyle(oDiv, null);
var attr = oDiv.attributes;

这应该返回一个对象，其中包含元素具有的每个 CSS 样式的字段。然后，您可以编写一个简单的、深度优先的树遍历来遍历 DOM 中的每个元素（我使用 jQuery 编写了这个，以便于理解）：

var stack = new Array();
stack.push($('html')[0]);
var i = 0;
while(stack.length > 0 && i < 100){
    //pop the next element off the stack
    var ele = stack.pop();

    var css = document.defaultView.getComputedStyle(ele, null);
    var attr = ele.attributes;

    //do things with the css object
    console.log(css);

    //do things with the attributes
    console.log(attr);

    //add children to the stack
    $(ele).children().each(function(index, child){
        stack.push(child);
    });
    i++;
}

请注意，我在其中放置了一个计数器 (i) 以将迭代次数限制为 100，并且如果您的页面有大量元素，则可以防止您炸毁浏览器。如果需要，您可以删除它，但要小心。另请注意，搜索的根可以是 DOM 中的任何节点，但我从 html 标记开始。

根据您的评论，我将介绍您将如何实现这一点。请记住，它所做的只是将 CSS/属性对象打印到控制台，您需要修改该部分以执行您真正想要的操作。

脚本：

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
<script type="text/javascript">
function doStuff(){
  var stack = new Array();
  stack.push($('html')[0]);
  var i = 0;
  while(stack.length > 0 && i < 100){
    //pop the next element off the stack
    var ele = stack.pop();

    var css = document.defaultView.getComputedStyle(ele, null);
    var attr = ele.attributes;

    //do things with the css object
    console.log(css);

    //do things with the attributes
    console.log(attr);

    //add children to the stack
    $(ele).children().each(function(index, child){
        stack.push(child);
    });
    i++;
  }        
}
</script>

运行它的 HTML 按钮

<button type="button" onclick="doStuff()">Click Me!</button>

全面实施

<!DOCTYPE html>
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
<script type="text/javascript">
function doStuff(){
  var stack = new Array();
  stack.push($('html')[0]);
  var i = 0;
  while(stack.length > 0 && i < 100){
    //pop the next element off the stack
    var ele = stack.pop();

    var css = document.defaultView.getComputedStyle(ele, null);
    var attr = ele.attributes;

    //do things with the css object
    console.log(css);

    //do things with the attributes
    console.log(attr);

    //add children to the stack
    $(ele).children().each(function(index, child){
        stack.push(child);
    });
    i++;
  }        
}
</script>
</head>
<body>
  <button type="button" onclick="doStuff()">Click Me!</button>
</body>
</html>

我很想听听你想用这个来完成什么。这是一个缓慢的操作，检查您放置在页面上的标签通常没有多大好处......

于 2012-09-22T18:12:44.360 回答