Question

是否可以使用Javascript检测CSS支持？

例如，是否可以检测浏览器是否支持这样的属性选择器？

input[type='text'] { }

Answer 1

Modernizr旨在检测浏览器功能，并且可能在此实例中提供帮助。 http://www.modernizr.com/

Answer 2

这有点推测，因为我还没有测试过，但我相信通过JS可以添加一个style元素后跟一个它有效的元素，然后测试值：

推测未经测试的代码，可能有效也可能无效（jQuery用于简洁）：

$('<style type="text/css" id="foo">input[type="text"]{ width: 10px; }</style>').appendTo('head');
$('<input type="text" id="bar">').appendTo('body');
if ($('#bar').width() == 10)
{
  //attr selector supported
}
$('#foo, #bar').remove();

Answer 3

document.querySelectorAll("input[type='text']")

但是对于旧浏览器而言，这自然会失败。

除此之外，您可以使用style属性来检查是否已应用某个CSS属性。

input[type='text'] {
  background-repeat: no-repeat; /* or any other irrelevant, non-default value */
}

和

if (myInputElem.style.backgroundRepeat == "no-repeat") {
  // selector is supported
}

使用Javascript检测CSS功能

3 个答案: