0

我想查看 HTML 中任何标签的所有属性值。即使它们在标签中设置或不在 HTML 中设置。例如：

<div style="background-color:#000000;">
<p>abc</p>
</div>

我想知道如何找到背景颜色<p>。原因是有很多方法可以设置标签中属性的值。例如：可以在外部 css 文件、javascript 文件中设置值，可以通过父标签设置，可以在同一页面的 css 中设置等。但是总是难以通过读取来跟踪设置值（例如字体大小）整个代码并打开 HTML 代码中引用的所有文件。我想知道包含在 a 中的文本的字体值，<p>但是很难在整个页面及其关联的 .js 和 .css 文件上进行搜索以找出<p>标签正在选择它的字体值。所以，我想知道如果我在浏览器中选择文本，那么有没有办法显示所选文本的所有属性及其值。就像 Visual Studio、Netbeans、Eclipse IDE 等一样，在设计界面中显示任何拖放对象的所有属性。

4

3 回答 3

4

这正是 Firebug 的用途。我更喜欢使用 Chrome Inspector，但它非常相似。

  • 右键单击要“调查”的任何元素
  • 从上下文菜单中选择“检查元素”

像这样的东西弹出： chrome 检查器的屏幕截图

  • 在右下角，您可以看到应用于此元素的所有样式。
    • element.style 是“内联”样式，直接应用于元素的样式属性
    • 所有其他选择器都来自您的样式表。选择器旁边是文件名和此选择器所在的行号（在屏幕截图中，它是一个缩小的样式表，因此行号没有多大意义）
    • 将鼠标悬停在每个样式声明上时，您可以在其旁边看到一个复选框。取消选中此项将禁用样式。非常适合调试。
    • 您甚至可以通过编辑或添加规则直接更改样式。当然，之后您必须将这些保存到您的 css 文件中，但这对于开发和测试非常有用。

你真的应该学会使用检查器，它是一个非常强大的工具，可以让开发变得如此容易！

于 2013-06-02T13:55:27.010 回答
0 
var col = document.getElementById(your_div_id).style.backgroundColor;

你基本上可以用你能想到的每一个属性来做到这一点。如果它不是样式属性，只需删除.style.

如果属性名称中有破折号，破折号后面的字母通常只是大写，破折号被删除。

于 2013-06-02T13:36:36.840 回答
0

您必须进行搜索，获取元素，然后获取层次结构中的所有父元素并检查它们的值。

如果您只是查看页面并想知道并且不需要以编程方式执行此操作，您可以使用浏览器 F12 控制台查看它从何处获取其属性

例如，当您选择 html 标记时，chromes 控制台窗口将在右侧显示 css 属性以及它们的来源。

于 2013-06-02T13:40:48.617 回答