Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How do you select elements based on their style?

Using jQuery, how would you find elements which have a particular style (eg: float: left), regardless of whether it's an inline style or one defined in a CSS file?

like image 398
nickf Avatar asked Jan 14 '09 05:01

nickf


People also ask

How do we select an element?

The id selector uses the id attribute of an HTML element to select a specific element. The id of an element is unique within a page, so the id selector is used to select one unique element! To select an element with a specific id, write a hash (#) character, followed by the id of the element.

Which selector is used to define the style for an element?

Id Selectors The id selector is used to define style rules for a single or unique element. The id selector is defined with a hash sign ( # ) immediately followed by the id value.

What are 3 correct ways to target an element for styling?

URLs with an # followed by an anchor name link to a certain element within a document. The element being linked to is the target element. The :target selector can be used to style the current active target element.

How do we select the content we want to style in HTML elements?

You will begin by using the type selector to select HTML elements to style. Then, you will combine selectors to identify and apply styles more precisely. Lastly, you will group several selectors to apply the same styles to different elements.


2 Answers

Using the filter function:

$('*').filter(function() {      return $(this).css('float') == 'left'; }); 

Replace '*' with the appropriate selectors for your case.

like image 179
Eran Galperin Avatar answered Sep 20 '22 20:09

Eran Galperin


This is gonna be slow. Like REALLY slow. If you know you need to select all elements with a given CSS style, you will see much better performance by applying a single additional css rule to each element, and then selecting by that rule.

It's going to be MUCH faster and more readable to boot.

CSS:

.float-left {float:left} 

Javascript:

$('.float-left'); 
like image 38
Kenan Banks Avatar answered Sep 21 '22 20:09

Kenan Banks