how can I detect the css value with jquery? [duplicate]

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() - google is your friend. This applies to elements, with this class given. — Christoph
– Christoph, Commented Mar 7, 2014 at 7:32
You can only detect it once an element has been given such a class, though. — Ja͢ck
– Ja͢ck, Commented Mar 7, 2014 at 7:32
@Mr.iC You are specifying the property, whereas he wants to detect the property on basis of it's value — Mr. Alien
– Mr. Alien, Commented Mar 7, 2014 at 7:34
@Mr.Alien thats true - there must be an easier way. Interesting question.. — Mr. iC
– Mr. iC, Commented Mar 7, 2014 at 7:48

Jivings · Accepted Answer · 2014-03-07 07:35:35Z

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 7, 2014 at 7:35

Jivings

23.3k7 gold badges63 silver badges102 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Bhojendra Rauniyar Over a year ago

this would be just for width but I wanted to detect value of each property.

Jivings Over a year ago

@C-link Then you'll have to do multiple statements as above.

Joel Cornett Over a year ago

Wouldn't it be better to do this.style.width and avoid the overhead of wrapping the element in jQuery?

jozxyqk · Accepted Answer · 2014-03-07 07:50:46Z

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);

Collectives™ on Stack Overflow

how can I detect the css value with jquery? [duplicate]

2 Answers 2

3 Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Linked

Related