我可以检查一下CSS属性是否对jQuery有效？

Question

我正在构建一个简单的CSS编辑器,我想让用户编辑元素的CSS属性或添加一个新元素.

在将新的CSS属性应用于元素之前,我想检查属性是否有效.

您是否知道一种简单的方法来检查CSS属性/值是否对jQuery有效？

更新:

例:

$('#some-element').css('margin','10px'); //this is valid and it will be applied
$('#some-element').css('margin','asds'); //this is not valid and it will not be applied

在申请财产之前如何检查margin: asds;无效？

Answer 1

我可能想到的快速解决方案是使用CSS.supports函数。也可以与 vanilla js 一起使用。事情是这样的：

CSS.supports(propertyName, propertyValue)

CSS.supports('color','red') 
//True.
CSS.supports('color', '#007')
//True. 

CSS.supports('color', 'random')
//False. 
CSS.supports('colours', 'red')
//False. 

我认为没有必要生成辅助函数，因为它非常简单。

Answer 2

您可以创建一个新元素并将CSS应用于它.您读取了初始值,将您的css应用于此元素并立即再次读取该值.如果新值不等于初始值,则css有效(因为它已成功应用于元素).

var div = $("<div>");
var _old = div.css(property);
div.css(property,value);
var _new = div.css(property);
var valid = _old!=_new;
// if (_old != _new), the rule has been successfully applied
console[valid?"log":"warn"]( `${property}:${value} is ${valid?"":"not"} valid!` );

示例小提琴