how can I detect the css value with jquery?

Question

Suppose in my style sheet:

.test{width: 20px; height: 50px; color: blue;}
.some-test{padding: 20px; margin: 10px;}
.even-test{font-size: 20px; color: red;}

Is it possible to detect the 20px value of each css properties so that I could replace it?

I'm supposing to detect something like this:

$('.selector').filter(function() {
    return $(this).css(property) === '20px';
}).css(property, value);

Isn't there anything something like: style.arguments[] ?

[`.css()`](http://api.jquery.com/css/) - google is your friend. This applies to elements, with this class given. — Christoph, Mar 07 '14 at 07:32
You can only detect it once an element has been given such a class, though. — Ja͢ck, Mar 07 '14 at 07:32
Sort of, but it'll be a work-around solution looking at each individual element and changing their inline `style` attribute, rather than the stylesheet itself. — David Thomas, Mar 07 '14 at 07:33
@Mr.iC You are specifying the property, whereas he wants to detect the property on basis of it's value — Mr. Alien, Mar 07 '14 at 07:34
@Mr.iC but again, like that, you will have to keep writing condition for each property which isn't an impressive solution :) — Mr. Alien, Mar 07 '14 at 07:40
@Mr.Alien thats true - there must be an easier way. Interesting question.. — Mr. iC, Mar 07 '14 at 07:48

score 0 · Answer 1 · answered Mar 07 '14 at 07:35

0

You can use the filter function in jQuery to find all elements that have that width.

$('.allYourSelectors').filter(function() {
    return $(this).css('width') === '20px';
}).css("width", newWidth);

However, it would be much better to just give them all the same class that you can modify.

answered Mar 07 '14 at 07:35

Jivings

22,834
6
60
101

this would be just for width but I wanted to detect value of each property. – Bhojendra Rauniyar Mar 07 '14 at 07:37
@C-link Then you'll have to do multiple statements as above. – Jivings Mar 07 '14 at 07:38
Wouldn't it be better to do `this.style.width` and avoid the overhead of wrapping the element in jQuery? – Joel Cornett Mar 07 '14 at 08:11

score 0 · Answer 2 · answered Mar 07 '14 at 07:50

To search through CSS styles (not sure if this gets style="..." styles):

var parseStyle = function(rules) {
    for (var i = 0; i < rules.length; ++i)
    {
        console.log(rules[i].style.width);
    }
};

//care needs to be taken as to when this executes - styles may not have been loaded yet
for (var i = 0; i < document.styleSheets.length; ++i)
    if (document.styleSheets[i].rules && document.styleSheets[i].rules.length > 0)
        parseStyle(document.styleSheets[i].rules);

If it's not the CSS properties you want but the result of the style on an element, this might be more what you're after...

var element = ... jquery or whatever
var elementStyle = element.currentStyle || getComputedStyle(element);
console.log(elementStyle.width);

how can I detect the css value with jquery?

2 Answers2