5

我正在构建一个简单的 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;无效？

4

6 回答 6

6

您可以创建一个新元素并将您的 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!` );

示例小提琴

于 2013-02-28T12:55:49.203 回答
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.

我认为不需要生成辅助函数，因为它非常简单。

于 2020-10-27T08:17:32.670 回答
3

从克里斯托夫的回答中我得到了这个：

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');
}
于 2013-02-28T13:44:11.197 回答
2

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

$("body").css("border");  // "0px none rgb(0, 0, 0)"
$("body").css("borderx"); // undefined
于 2013-02-28T12:17:47.687 回答
1

回答

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

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
于 2016-11-21T15:05:54.107 回答
-3

您可以使用普通的 javascript 和 regex 来检查 css 是否“有效”，您可以在w3schools了解有关 javascript 的 regex 实现的更多信息。

这里还有一个 SO 帖子，讨论了创建一个查找 CSS 的正则表达式。

于 2013-02-28T12:15:09.343 回答