5

私は単純な 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;有効でないことを確認する方法は?

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 と正規表現を使用して、css が「有効」かどうかを確認できます。JavaScript の正規表現の実装について詳しくは、w3schoolsを参照してください。

CSS を検索する正規表現の作成について説明している SO の投稿もここにあります。

于 2013-02-28T12:15:09.343 に答える