How to find all elements with a particular CSS style, without a JS library?

Question

I'd like to write a bookmarklet to correct text styling on other people's pages. In particular, I'd like to find any element with "text-align: justify" and change them to "text-align: left". I'm not sure how to find those elements though. Because this is a bookmarklet to be used on arbitrary web pages, I'd rather not rely on any Javascript library (jQuery, etc) to help.

If you are trying to make content more readable you can always just use readability.com — Mark
– Mark, Commented Sep 16, 2012 at 21:24
@Mark: thanks, I know about readability.com, and Evernote has a similar service. I wanted to try my own solution. — Ned Batchelder
– Ned Batchelder, Commented Sep 16, 2012 at 21:24
Why no libraries? Is your own solution not going to be a library ? — user182669
– user182669, Commented Jun 26, 2013 at 21:56

Nathan Wall · Accepted Answer · 2012-09-16 21:29:17Z

1

This finds all elements with text-align: justify and sets the border to red. It should be plenty to get you started. Note: This is not very efficient, but there's not a good efficient solution to your request. To improve performance, try searching only relevant tags. (Maybe you only need to check Ps and DIVs?)

// Get all elements
var els = document.getElementsByTagName('*');
// Search for style: text-align = justify.
for(var i = 0, el; el = els[i]; i++) {
    if(getComputedStyle(el).textAlign == 'justify') {
        el.style.border = '1px solid #f00';
    }
}

answered Sep 16, 2012 at 21:29

Nathan Wall

6,8382 gold badges24 silver badges23 bronze badges

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

Comments

Šime Vidas · Accepted Answer · 2012-09-16 21:32:36Z

1

Here:

var walkTheDOM = function walk ( node, func ) {
    if ( node.nodeType !== 1 ) return;
    func( node );
    node = node.firstChild;
    while ( node ) {
        walk( node, func );
        node = node.nextSibling;
    }
};

walkTheDOM( document.body, function ( elem ) {
    if ( getComputedStyle( elem ).textAlign === 'justify' ) {
        elem.style.textAlign = 'left';
    }
});

Live demo: http://jsfiddle.net/W3BUe/1/

answered Sep 16, 2012 at 21:32

Šime Vidas

187k66 gold badges290 silver badges392 bronze badges

5 Comments

Ian Over a year ago

Wouldn't document.getElementsByTagName be faster and/or more efficient? Not that it matters, I'm just wondering, since it's a native method

Šime Vidas Over a year ago

@ianpgall I don't know which one would be more efficient, but I expect both to be quite fast.

Šime Vidas Over a year ago

@DBJDBJ What matters is that it works in all current browsers. OP didn't specify that he wants to support legacy browsers as well.

user182669 Over a year ago

@Šime what matters is not to reinvent the whell. This kind of code is much more complex than Your solution presented here. Rock solid solutions where tried and tested many times over elsewhere and are in widespread use everywhere. Pick Your favourite selection library. Leave it to the experts.

Šime Vidas Over a year ago

@DBJDBJ Shouldn't that comment be for the OP? He's the one who requested a non-library solution. I agree with you here. (Although OP states the code's for a bookmarklet, which means that libraries are out of the question.)

Collectives™ on Stack Overflow

How to find all elements with a particular CSS style, without a JS library?

2 Answers 2

Comments

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related