我可以检查 CSS 属性是否对 jQuery 有效吗? [英] Can I check if a CSS property is valid with jQuery?

问题描述

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

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

你知道一种检查 CSS 属性/值是否对 jQuery 有效的简单方法吗?

更新:

示例:

$('#some-element').css('margin','10px');//这是有效的，它将被应用$('#some-element').css('margin','asds');//这是无效的，不会被应用

如何在应用属性之前检查margin: asds; 是否无效?

解决方案

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

var div = $("
");var _old = div.css(属性);div.css(属性，值)；var _new = div.css(属性);var 有效 = _old!=_new;//如果 (_old != _new)，则规则已成功应用console[valid?"log":"warn"](`${property}:${value} 是 ${valid?"":"not"} 有效！`);

小提琴示例

I'm building a simple CSS editor and I want to let the user to edit CSS properties of an element or to add a new one.

Before applying the new CSS property to the element, I want to check if the property is valid.

Do you know a simple way to check if a CSS property/value is valid with jQuery?

UPDATE:

Example:

$('#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

How to check, before applying the property, that margin: asds; is not valid?

解决方案

You can create a new element and apply your CSS to it. You read the initial value, apply your css to this element and immediately read the value again. If the new value does not equal the initial value, your css is valid (because it has been successfully applied to the element).

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

这篇关于我可以检查 CSS 属性是否对 jQuery 有效吗?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！