0

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

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

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

谢谢。

4

3 回答 3

4

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

JavaScript 不是 CSS 的老师，因此它并没有真正的机制来报告应用的样式是否有效。我能想到的最接近的事情是对元素的计算样式进行某种迭代扫描（但即使那样，您也需要提供该样式列表，即告诉它要迭代哪个）并比较它们之前和之后的值给定属性的应用。

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

于 2013-10-03T12:40:31.933 回答
3

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

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

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

于 2013-10-03T14:03:03.197 回答
2

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

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

警告1：正如其他人所说，除了特殊情况外，此检查可能没有什么意义；

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

于 2013-10-03T14:32:39.927 回答