如何在没有JS库的情况下找到具有特定CSS样式的所有元素?

时间:2012-09-16 21:20:30

标签: javascript css dom

我想写一个书签来纠正其他人页面上的文字样式。特别是,我想找到任何带有“text-align:justify”的元素,并将它们更改为“text-align:left”。我不知道如何找到这些元素。因为这是一个在任意网页上使用的书签,所以我宁愿不依赖任何Javascript库(jQuery等)来提供帮助。

2 个答案:

答案 0 :(得分:1)

这会找到text-align: justify的所有元素,并将边框设置为红色。开始你应该有很多东西。 注意:这不是很有效,但是对您的请求没有一个好的有效解决方案。要提高性能,请尝试仅搜索相关标记。 (也许你只需要检查Ps和DIV?)

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

答案 1 :(得分:1)

下面:

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

现场演示: http://jsfiddle.net/W3BUe/1/