23

I need to find an element based on a specific css attribute. The css is applied inline and I can not use a class. Is there anyway to achieve this in jQuery?

8 Answers 8

28

You could use an attribute selector

For example

$(":radio [style*='regular']")

would return a wrapped set of any input radios that contain 'regular' in the style attribute

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

3 Comments

what if we have to make selection based on two values left: 180px and top:360px?
you just need to use multiple attribute selectors e.g. $("[left='180px'][top='360px']")
The link is broken.
18

I think this is the cleanest solution. Say you want to find all elements where z-index has particular value:

$('*').filter(function () { return $(this).css('z-index') == 101 })

Comments

4

I think you might be able to write a custom jQuery selector to do this.

For example, if you want to do select by certain style attribute, you can do:

 jQuery.extend(jQuery.expr[':'], {
    styleEquals: function(a, i, m){
        var styles = $(a).attr("style").split(" ")
        var found = false;
        for (var i = 0; i < styles.length; i++) {
            if (styles[i]===m[3]) {
                found = true;
                break;
            }
        }
        return found;
    }
});

Then it can be used in conjuction with any other selector you can select all input elements with certain style like this:

$('input:styleEquals('width=10px')')

6 Comments

this functionality is already included in the jQuery language. all you need is $('selector[cssAttribute = value]')
jquery inbuilt selector works only if its an exact match , so it will only match if style = "absolute;" not if style = "absolute; left" . So the solution I posted is for finding all elements with absolute value not only exact matches
@Surya: yep, I had a bad case of cerebro-rectal interitis. Don't know what I was thinking.
I am getting (styles[i].equals(m[3])) is not a function on this line if (styles[i].equals(m[3])) {
@Sammy I updated the code ..I didnt test it intially ..i just typed it in the browser.
|
4

Yes, I think the fastest and easiest way to achieve the desired results would be to target styles with a property class selector.

Like stated before:

$('div.yourClass[style*="background-color:Blue"]).css('color', 'White');

That way we target all divs with same class that have blue background and tell them all to have white color text. Of course instead of .css we can use anything here, .animate and tell all blues to be animated etc. This helped me a lot with DB relations and people setting up strange things in DB.

I used to be less generic, and target strings with :contains... but then somebody goes to the base, and changes texts and labels, and bye bye code ;)

Hope it helps.

1 Comment

There is a typo in you code sir. $('div.yourClass[style*="background-color:Blue"]').css('color', 'White');
3

Something like:

$('selector').each(function() {
    if($(this).attr('style').indexOf('font-weight') > -1) {
        alert('got my attribute');
    }
});

1 Comment

.indexOf can return 0, which will be evaluated to false
1
var ccsStyle="font-weight:bold";
var els = [];
$("*").each(function(){
  var st = $(this).attr("style");
  if(st.indexOf(cssStyle) > -1) els.push(this);
});
//do stuff with els

Comments

0

You could use the attribute flag and use contains if you know the specific format that it's in.

$("[style*='position']")

This would find all the elements that define the position css attribute.

Comments

0

You can search for any inline attribute with .attr() .. .attr('attr_name')

http://api.jquery.com/attr/

css_inline_value = $(element).attr('style');

if (css_inline_value = search_value) {
    // do stuff
}

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.