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应用于它。您读取了初始值，将您的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!` );

<强> Example fiddle

Answer 2

来自Christoph的回答我得到了这个：

function validCSS(property,value){
    var div = $("<div>");
    var _old = div.css(property);
    div.css(property,value);
    var _new = div.css(property);
    return (_old!=_new);
}

像这样使用：

if (validCSS(property, value)) {
    $('#some-element').css(property, value);
} else {
    alert ('Invalid CSS');
}

Answer 3

您可以读取任何元素的CSS属性，并检查结果是否已定义。大多数（所有？）CSS属性都有一个默认值。

$("body").css("border");  // "0px none rgb(0, 0, 0)"
$("body").css("borderx"); // undefined

Answer 4

答案

您可以使用我创建的这个功能

function validCSS(property, value){
  var $el = $("<div></div>");
  $el.css(property, value);
  return ($el.css(property) == value);
}

https://gist.github.com/dustinpoissant/7828a80d2899c57d92472b59675fc3fa

测试

console.log(validCSS("width", "FooBar")); // false
console.log(validCSS("width", "100px")); // true

Answer 5

我可能想到的快速解决方案是使用CSS.supports函数。也可以与香草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 6

您可以使用普通的javascript和regex来检查css是否“有效”，您可以在w3schools找到有关javascript正则表达式实现的更多信息。

还有一篇SO帖子here，讨论创建一个找到CSS的正则表达式。

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

6 个答案:

答案

测试