Question

在我的项目中，我需要确保是否可以将特定的CSS属性应用于HTML元素。例如，我需要检查'img'标记是否支持'color'属性。我记得在某处读过下面的代码可以用来检查它。

 var image = document.createElement('img');
    if(image.style.color)
        image.style.color = "blue";

但这是错误的结果。如果有人知道如何检查html元素是否支持某个属性，那么请回答。

感谢。

Answer 1

从字面上看，该代码仅检查元素的本机color对象上是否存在属性style。它不承诺任何有关此类财产的有效性。实际上，您可以在对象上存储任何属性;是否具有风格效果是另一个问题。

JavaScript不是CSS的教师，因此它实际上没有报告应用样式是否有效的机制。我能想到的最接近的事情就是对元素的computed styles进行某种迭代扫描（但即使这样，你也需要提供样式列表，即告诉它要迭代哪个）并比较它们的值在申请特定财产之前和之后。

然而，这很笨重，因为浏览器可能会以与您应用它的方式不同的方式报告样式。例如，您可能已将颜色设置为HEX，但可以从计算的样式中将其报告为RGB（a）。

Answer 2

根据CSS规范，所有属性都可以设置为所有元素。它们可能不会对元素产生潜在影响（“适用于它”，使用CSS术语，这有点奇怪），但这取决于元素的其他属性。例如，width不会“适用于”span元素，但如果您在元素上设置display: inline-block，则width适用于该元素。

此外，例如color属性肯定“适用于”img元素，但真正是否影响渲染是一个不同的问题。它主要没有，但如果图像不可用，alt文本会以声明的颜色显示（或应该出现）。

所以你应该考虑你真正需要知道的和为什么。

Answer 3

如果您想知道对象中是否存在特定属性，您可以执行以下操作：

var image = document.createElement('img');
for (var key in image.style) {
    if (key == "color") image.style.key = "blue";
}

警告1：正如其他人所说的那样，除了特殊情况外，这项检查可能没什么意义;

警告2：上层代码检查浏览器或用户是否已为对象分配了属性（例如，基于Webkit的某些浏览器为style执行此操作，其他一些可能不要这样做，就像旧IE一样。）