Javascript 如何知道哪些CSS属性对HTML元素有效

我很难知道什么CSS属性对给定的HTML元素/标记有效/使用

我一直希望在网上找到一些资源，其中包含每个元素（例如

div

，

a

，

p

，等等），以及可以与该元素一起使用的CSS属性列表。我发现了一些看起来不错的资源，但我注意到它们缺少一些有效的属性（例如缺少

表布局

），其他元素几乎没有CSS信息

我怎么知道什么CSS元素对元素有效

window.getComputedStyle(element)

也许是个好的开始。例如，显示其所有css属性（显式和隐式设置）的段落：

document.addEventListener（'DOMContentLoaded'，（）=>{
const example=document.getElementById（'example'）；
const p=window.getComputedStyle（示例）；
example.textContent=Object.values（p）.join（'\n'）；
控制台日志（p）；
})

---

您应该只知道哪些CSS对某些特定元素无效。从技术上讲，任何元素都可以由任何CSS属性设置样式，没有任何限制，但是当您在chrome中的inspector中面对它们时，您会知道一些特殊情况，检查元素，然后单击computed选项卡。有一个切换来显示所有继承的属性。有很多很多属性可以设置样式。值得一提的是，他们中的一些人只在一起工作。

position:static

元素不会被

top:10px

更改，但这并不是说

top:10px

是“无效的”，实际上，这是一个有趣（且有效）的问题。我不知道为什么downvotescs真的与HTML无关。它是一种可以应用于任何类似XML的标记语言的语言。@felipsmartins我猜它需要资源。因此，它属于OT：寻求建议。不过，这是一个有效的问题，我认为可以回答，因为这基本上是关于开发人员将使用的工具。同样，它也可能“过于宽泛”，因为一个人可以写多少来解释一切。这到底是如何回答这个问题的呢？回答得好，这是正确的方法。甚至MDN也建议：要获取元素的所有CSS属性的值，应该使用Window.getComputedStyle（）。我不是选民。但我认为getComputedStyle（）只获取应用的样式，而不是所有适用于HTML的样式element@felipsmartins你的假设是错误的。@connexo这个答案显然是错误的，因为如果你在Chrome中测试代码，你会得到像

px

，

py

这样的属性，而这些属性是“无效的”用于

p

元素，因为它们是为SVG元素设计的。getComputedStyle（）将为所有元素返回相同的属性（所有属性）。它们是简单的“有效”属性，因为它们存在（元素在这里不相关）