Jquery find by css style

Css find element style property value in jquery

Solution 1: Credit goes to the original poster here; jQuery find by inline css attribute The function is ‘styleEquals’ and can be implemented as; You can then search elements by their style attribute values using your new jquery extensions function such as; Solution 2: All I can say is don’t do this! Solution 1: Your selector is white-space sensitive, given that you have white-space in the attribute, you’ll need that in your selector as well: The easiest way, which reduces the problems of precisely matching a string, if you’re filtering elements according to a particular CSS property, is to use : References: .

How to find an element by style attribute?

Your selector is white-space sensitive, given that you have white-space in the attribute, you’ll need that in your selector as well:

The easiest way, which reduces the problems of precisely matching a string, if you’re filtering elements according to a particular CSS property, is to use filter() :

1. In your HTML there is a space between «display:» and «list-item».
2. Your selector needs to be wrapped with quotations «» .

Simply change your selector to include this space and wrap it in quotes:

JSFiddle demo .

How to get the CSS left-property value of a div using JavaScript, With jQuery you could use the .css() method to read the CSS-property of the element. $(function () < var left =

Select HTML element by CSS property value in style attribute

Credit goes to the original poster here;

jQuery find by inline css attribute

The function is ‘styleEquals’ and can be implemented as;

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

You can then search elements by their style attribute values using your new jquery extensions function such as;

$("div:styleEquals('top=252px'):styleEquals('left:54px')"); 

All I can say is don’t do this!

If you can add a unique position style to a div, you can equally easily add an identifier at the same time.

Use this identifier to select the element in javascript, not the css positioning.

You can do it like this with the jQuery JavaScript library out of the box:

var pos = < top: 252, left: 54 >; $('div[style*="top: ' + pos.top + 'px"][style*="left: ' + pos.left + 'px"]'); 

You need to make sure to use white space consistently. If you type:

the proposed selector will not work.

You can also add other CSS properties to the style attribute by using my example code, and the order would not matter. Here is an example:

JQuery [attribute=value] Selector, The [attribute=value] selector selects each element with the specified attribute and value. Syntax. $(«[attribute=value]»). Parameter, Description. attribute

How to get a style value of an element

background color outputs are rgb() in jQuery as far as I know, so I don’t think if there’s a convenient way of comparing it!

take a look at THIS example,

alert($('#color').css('background-color')); if($('#color').css('background-color')=='red')

it will not enter the first if because $(‘#color’).css(‘background-color’) equals rgb(255,0,0) and it doesn’t match red so it wont get inside the if condition.

what you can do, is to give the desired DOM a class, and check if the element has the class, like this:

which will fire the alert inside of it.

You’ll want to check against the RGB value of whatever InfoBackground is.

Notice the following returns rgb(251, 252, 197)

if ($("#myElement").css('background-color') == 'rgb(251, 252, 197)')

However , this seems like kind of a fickle approach. Different browsers might behave differently or implement InfoBackground differently. It would be better to assign a class, property, or data-attribute and then use that to dictate the color.

Find element by style selector in jquery, $(‘table[style*=»width: 555px»]’).css(«width», «610px»);. If it does not work in IE, you could try

Find element by style selector in jquery

And you should quote the value with » or ‘ .

$('table[style*="width: 555px"]').css("width", "610px"); 

If it does not work in IE, you could try to remove the space? (totally untested!)

$('table[style*="width: 555px"],table[style*="width:555px"]') .css("width", "610px"); 

$('table').filter(function() < return $(this).css('width') == '555px'; >).css("width", "610px"); 

I’d imagine there’s also an issue with whitespace too, as your HTML contains spacing within the style element but your selector doesn’t. (I may be wrong here, not experienced with the E[a*=v] selector.)

Find css and change it in jquery Code Example, (‘#element’).css(‘display’, ‘block’); /* Single style */ $(‘#element’).css(<'display': 'block', 'background-color' : '#2ECC40'>); /* Multiple style */

Источник