Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Select Element By CSS style (all with given style)

Is there a way to select all elements that have a given style using JavaScript?

Eg, I want all absolutely positioned elements on a page.


I would assume it is easier to find elements by style where the style is explicitly declared:

  • the style is non-inherited (such as positioning)
  • the style is not the default (as would be position:static).

Am I limited to those rules? Is there a better method for when those rules apply?

I would happily to use a selector engine if this is provided by one (ideally Slick - Mootools 1.3)

EDIT:
I came up with a solution that will only work with above rules.
It works by cycling through every style rule, and then selector on page.
Could anyone tell me if this is better that cycling through all elements (as recommended in all solutions).
I am aware that in IE I must change the style to lowercase, but that I could parse all styles at once using cssText. Left that out for simplicity.
Looking for best practice.

var classes = '';
Array.each(documents.stylesheets, function(sheet){
   Array.each(sheet.rules || sheet.cssRules, function(rule){
      if (rule.style.position == 'fixed') classes += rule.selectorText + ',';
   });
});
var styleEls = $$(classes).combine($$('[style*=fixed]'));
like image 676
SamGoody Avatar asked Jul 15 '10 21:07

SamGoody


People also ask

Can we select specific elements for styling?

Front-End Basics CSS – Selecting Specific Elements for Styling We can be selective in which HTML elements we style. So far, we have seen a few CSS style propertiesand how they can be applied to HTML elements.

What is selective styling in CSS?

Front-End Basics CSS – Selecting Specific Elements for Styling We can be selective in which HTML elements we style. So far, we have seen a few CSS style propertiesand how they can be applied to HTML elements. However, this way of styling affects all the HTML elements, it would be useful to selectively style certain ptags rather than all of them.

What are the basic CSS selectors?

This page will explain the most basic CSS selectors. The element selector selects HTML elements based on the element name. The id selector uses the id attribute of an HTML element to select a specific element.

How do I select a CSS element with a specific word?

CSS [attribute~="value"] Selector The [attribute~="value"] selector is used to select elements with an attribute value containing a specified word. The following example selects all elements with a title attribute that contains a space-separated list of words, one of which is "flower":


3 Answers

You can keep Mootools, or whatever you use... :)

function getStyle(el, prop) {
  var view = document.defaultView;
  if (view && view.getComputedStyle) {
    return view.getComputedStyle(el, null)[prop];
  }
  return el.currentStyle[prop];
}

​function getElementByStyle(style, value, tag)​ {
  var all = document.getElementsByTagName(tag || "*");
  var len = all.length;
  var result = [];
  for ( var i = 0; i < len; i++ ) {
    if ( getStyle(all[i], style) === value )
      result.push(all[i]);
  }
  return result;
}
like image 62
25 revs, 4 users 83% Avatar answered Oct 17 '22 13:10

25 revs, 4 users 83%


For Mootools:

var styleEls = $$('*').filter(function(item) {
    return item.getStyle('position') == 'absolute';
});
like image 37
ScottS Avatar answered Oct 17 '22 14:10

ScottS


In jQuery you could use

$('*').filter( function(){
  return ($(this).css('position') == 'absolute');
} );

[update]

Or even create a new selector.
got me interested and so here is one (its my 1st, so its not built for efficiency) to find elements by css property..

$.expr[':'].css = function(obj, index, meta, stack){
  var params = meta[3].split(',');

  return ($(obj).css(params[0]) == params[1]);
};

usage: $('optionalSelector:css(property,value)')
will return all elements (of optionalSelector) whose property = value

example: var visibleDivs = $('div:css(visibility,visible)');
will return all divs whose visibility is set to visible (works for the default visibility as well..)

like image 7
Gabriele Petrioli Avatar answered Oct 17 '22 13:10

Gabriele Petrioli