我可以用jQuery检查CSS属性是否有效吗？

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

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

您知道用jQuery检查CSS属性/值是否有效的简单方法吗

更新：

例如：

$('#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无效？
您可以使用普通javascript和正则表达式来检查css是否“有效”，您可以在上找到有关javascript正则表达式实现的更多信息

还有一篇SO帖子讨论了如何创建一个用于查找CSS的正则表达式。
您可以读取任何元素的CSS属性，并检查结果是否已定义。大多数（所有？）CSS属性都有一个默认值

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

您可以创建一个新元素并对其应用CSS。读取初始值，将css应用于该元素，然后立即再次读取该值。如果新值不等于初始值，则css有效（因为它已成功应用于元素）

var div=$（“”）；
var _old=div.css（属性）；
div.css（属性、值）；
var\u new=div.css（属性）；
var valid=\u old=_新的；
//如果（_old！=_new），则该规则已成功应用
控制台[有效？“日志”：“警告”]（`${property}:${value}是${valid？”：“not”}有效！`）；

从克里斯托夫的回答中，我得出以下结论：

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

答复
你可以使用我创建的这个函数

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

我可能想到的快速解决方案是使用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. 

我不认为有必要生成一个助手函数，因为它很简单。
取决于你认为“有效”的东西。壁虎浏览器将无法识别某些只能在WebKIT中使用的CSS属性，例如，您可以使用普通java脚本和正则表达式来完成这一操作。“Fabr Isio MaTeE-I”将考虑一个有效的属性，一个属性将被浏览器（GECKO或WebKIT）接受并应用到该元素。你会这样做吗？…第二个链接讨论了它。有了正则表达式，我可以做一般的验证。例如
margin:10px通过正则表达式验证，它将由浏览器应用，但
边距：asdsd
也通过了正则表达式验证，但无效，它将不会被bowser应用。css文件正则表达式与元素样式验证有什么关系？@Victor这是我的观点，anser中的链接与您尝试的内容无关。您有观点吗。这更接近于我想要的，但这样我只能验证属性名，而不能验证值。也许我可以在应用属性之前获取CSS值，然后检查是否有更改。是的，我找不到其他方法来检查该值。$（“body”）.CSS（“border”，“1px 1px”）；=>/在某些情况下，这将起作用。但是如果我应用
$（'#some element'）.css（'color'，'black'）浏览器将返回计算的样式。所以
$（'some element'）.css（'color'）
将返回
rgb（0,0,0）
。在这种情况下，值不相等。好的，同时添加了代码。我会用这种方法试试看它是如何工作的。太好了！这就是答案@请注意，我没有测试任何东西，在将此元素附加到dom之前，某些属性可能无法正常工作。如果是这种情况，请将其连接起来，然后将其拆下。另外，一些值（如
width
）可能具有初始值（如
0px
），您也需要进行检查。但是我认为你现在的方向是正确的，你现在可以自己解决这些问题了。是的，我必须做一些测试。如果需要，我会做一些改变。不过，你的解决方案很好！非常感谢。
function validCSS(property, value){
  var $el = $("<div></div>");
  $el.css(property, value);
  return ($el.css(property) == value);
}

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

CSS.supports(propertyName, propertyValue)

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

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