CODEWITHSUNDEEP
jquerycss
Victor
Victor

Reputation: 621

Can I check if a CSS property is valid with jQuery?

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?

Upvotes: 5

Views: 4834

Answers (6)

Fendui
Fendui

Reputation: 121

The quickes solution I might think of, is to use CSS.supports function. Will work with vanilla js too. This is how it goes:

CSS.supports(propertyName, propertyValue)

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

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

I don't think there's any need to generate a helper function, because it's pretty straightforward.

Upvotes: 12

Dustin Poissant
Dustin Poissant

Reputation: 3418

Answer

You can use this function I created

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

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

Test

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

Upvotes: 1

Christoph
Christoph

Reputation: 51181

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

Upvotes: 6

Victor
Victor

Reputation: 621

From Christoph answer I got to this:

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

used like this:

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

Upvotes: 4

Micha&#235;l Witrant
Micha&#235;l Witrant

Reputation: 7714

You can read the CSS property on any element and check whether the result is defined. Most (all?) CSS properties have a default value.

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

Upvotes: 2

dotty
dotty

Reputation: 41433

You can use normal javascript and regex to check if css is 'valid', you find out more about javascript's regex implementation at w3schools.

There's also a SO post here which discusses creating a regex which finds CSS.

Upvotes: -3

Related Questions