Question

使用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？）。

我只是制作一个文件（非常简单，可能只有一个元素说），并在浏览器的左侧显示，右上角显示。

Answer 1

您可以使用文档对象的getComputedStyle（）方法和元素的attributes字段：

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>

我很想知道你为此想要完成的事情。这是一个缓慢的操作，检查您放在页面上的标签通常没什么好处......

获取给定元素的每个CSS属性和HTML属性

1 个答案: