Javascript、CSS:按样式属性获取元素

flvtvl50  于 2023-01-22  发布在  Java
关注(0)|答案(6)|浏览(169)

我想:
1.查找页面中所有元素的样式属性(例如:具有color:#333;的所有元素)
1.为所有这些对象更改此属性(例如,从color:#333更改为color:#444)。
你对此有何建议?

ycl3bljg

ycl3bljg1#

我的建议是尽量避免这样做,而是使用一个类来分配颜色值,然后可以使用该类而不是颜色值来查找元素。
据我所知,没有选择器(甚至在CSS3中也没有),您可以使用它来查询一个 specific 样式值,这意味着遍历所有元素(或者看起来你可以把它限制在所有带有style属性的元素上),然后查看element.style.color属性。现在,事情是,即使你在style属性中写color: #333;,不同的浏览器会以不同的方式回应你,可能是#333,可能是#333333,可能是rgb(51, 51, 51),甚至可能是rgba(51, 51, 51, 0)
所以总的来说,这确实是一个非常尴尬的练习。
既然你说这是针对Chrome扩展的,你可能不必担心多种格式,尽管我会把我们在野外看到的那些格式扔进去,以防Chrome改变格式(也许是为了与其他浏览器保持一致,这是众所周知的)。
但举个例子:

(function() {

  // Get all elements that have a style attribute
  var elms = document.querySelectorAll("*[style]");

  // Loop through them
  Array.prototype.forEach.call(elms, function(elm) {
    // Get the color value
    var clr = elm.style.color || "";

    // Remove all whitespace, make it all lower case
    clr = clr.replace(/\s/g, "").toLowerCase();

    // Switch on the possible values we know of
    switch (clr) {
      case "#333":
      case "#333333":
      case "rgb(51,51,51)": // <=== This is the one Chrome seems to use
      case "rgba(51,51,51,0)":
        elm.style.color = "#444";
        break;
    }
  });
})();

Live example using red for clarity|source-注意,这个例子依赖于ES5特性和querySelectorAll,但是因为这是Chrome,我知道它们在那里。
注意,上面假设了内联样式,因为你讨论的是style属性。如果你指的是 computed 样式,那么除了循环调用getComputedStyle页面上的所有元素之外,没有什么可做的。
最后一点:如果你真的想要一个值为color: #333的样式属性,而不是值color:#333color:#333333;color: #333; font-weight: bold或任何其他字符串,那么querySelectorAll可以处理这个问题:querySelectorAll('*[style="color: #333"]').但是它会 * 非常 * 脆弱。
从你下面的评论来看,你似乎需要遍历 every 元素,如果是这样的话,我根本不会使用querySelectorAll,我会使用递归下降:

function walk(elm) {
    var node;

    // ...handle this element's `style` or `getComputedStyle`...

    // Handle child elements
    for (node = elm.firstChild; node; node = node.nextSibling) {
        if (node.nodeType === 1) { // 1 == Element
            walk(node);
        }
    }
}

// Kick it off starting with the `body` element
walk(document.body);

这样你就不会建立大的、不必要的临时结构,这可能是遍历文档的整个DOM的最有效的方法。

vs3odd8k

vs3odd8k2#

如果你使用jquery的话肯定会更简单,在任何情况下,最好是使用类和filter jquery method来获取你想要的对象。
但如果你真的想得到它们,你可以这样做:

$(function () {
    $('p').filter(function () {
        return $(this).css('color') == '#333';
    }).css('color', '#444');
});

上面的脚本获得了具有所需css属性的元素,并设置了一个新的css属性(颜色#444)。

woobm2wo

woobm2wo3#

如果您不向所有要跟踪的元素添加至少一个特定的CSS类,则无法实现。
或者更好的方法是,在DOM的所有元素上循环,直到找到要找的东西,这样做的性能非常差。但是,请不要这样做

brgchamk

brgchamk4#

正如已经说过的,按颜色查询所有元素非常困难/低效。

// refrence: http://stackoverflow.com/questions/5999209/jquery-how-to-get-the-background-color-code-of-an-element
var arr = [];

$('*').each(function (i, ele) {
   // is red => save
   if($(ele).css('backgroundColor') == ('rgb(0, 0, 255)')) arr.push(ele);
});

console.log(arr);

下面是它的一个JSFiddle示例:http://jsfiddle.net/ddAg7/
我对此的建议是:"别这样"

eqoofvh9

eqoofvh95#

就像

$('selector').each(function() {
    if($(this).attr('style').indexOf('font-weight') > -1) {
        alert('got my attribute');
    }
});

在if语句中,你可以用不同的css替换它......不确定......虽然没有在所有浏览器上尝试过:)

4smxwvx5

4smxwvx56#

一行

[...document.querySelectorAll("[style*='color:#333']")].forEach(e=>e.style.color='#444')

x一个一个一个一个x一个一个二个x

相关问题