使用 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 )并将其显示在我浏览器的左侧，上面显示在右侧。
最佳答案
可以使用文档对象的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>
我很想听听您尝试用它完成什么。这是一个缓慢的操作，检查您放置在页面上的标签通常没有太大好处...
关于javascript - 获取给定元素的每个 CSS 属性和 HTML 属性，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/12308257/