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.

Answer 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';
    }
}