如何检查浏览器是否支持css值？ [英] How to check if css value is supported by the browser?

问题描述

我不是很熟悉javascript，所以请耐心等待我。 Safari 6及以下和较旧的Android移动浏览器可能更多不支持css值VH。我的DIV #id或class不是视口的高度。下面是一个页面的链接，我发现了一些有用的信息，但我真的不知道如何使用它与css值：

Im not very skilled in javascript so please be bear with me. Safari 6 and below and older android mobile browsers and maybe more do not support the css value VH. My DIV#id or class is not the height of the viewport. Below is a link to a page i found some useful information, but im really not sure how to use it with a css value:

检查是否支持css值

以下是作为快捷方式给出的代码：

Here is the code given as a shortcut for you:

if('opacity' in document.body.style) {  
   // do stuff
}

function isPropertySupported(property{
   return property in document.body.style;
 }

在我上面附带的链接的评论中，有人会询问如何检查是否支持css VALUE答案是，你设置它，然后读取值并检查浏览器是否保留它。现在我确定如果我知道更多我刚刚开始学习的javascript那将是有用的信息。

In the comments of the link i attached above someone does ask how to check if a css VALUE is supported and the answer is, "You set it, then read the value back and check if the browser retained it." Now im sure that would be useful information if i knew more javascript which i have just started to learn.

这就是我的想法，但我真的不知道如何去做这件事。
检查div＃id或d iv.class具有vh css值。
检查浏览器是否支持css值。
如果支持则继续加载。如果不支持，则更改id或class。

This is what i have in mind but im really not sure how to go around doing this. Check if div#id or div.class has vh css value. Check whether the css value is supported by the browser. If its supported then keep loading. If not supported then change id or class.

总结我的问题：

如何检查浏览器是否支持css值使用javascript或jquery？

How do i check if a css value is supported by the browser using javascript or jquery?

对答案的指导非常感谢。
感谢您的帮助。

Guidance to the answer is really appreciated. Thanks for your help.

推荐答案

我假设您打算检查 vh 支持的值，而不是具体的 DIV #id 承担吗？

I assume you meant to check whether the vh value is supported, not whether specifically DIV#id bears it?

function cssPropertyValueSupported(prop, value) {
  var d = document.createElement('div');
  d.style[prop] = value;
  return d.style[prop] === value;
}
cssPropertyValueSupported('width', '1px');
// => true
cssPropertyValueSupported('width', '1vh');
// => maybe true, maybe false (true for me)
cssPropertyValueSupported('width', '1foobar');
// => false

这篇关于如何检查浏览器是否支持css值？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！