檢查多個類的樣式=「顏色：....」

-1

作爲例子，我有一個名爲'foo'的類，長度爲100.檢查多個類的樣式=「顏色：....」

現在我想知道哪一個100有一個風格（顏色）。其中只有一個有顏色，但順序是隨機的，所以我不能foo[100]獲取類，因爲它的隨機1-100之間

其中之一是這樣的：<span style="color:yellow;">hello</span> 那麼如何才能得到這一個？我已經在這裏查了很多其他的問題，但是我找不到有關這部分的任何內容。

它看起來像：

<div class="foo"> <div><span style="color:yellow;">2</span></div></div> 
<div class="foo"> <div><span>1</span></div></div> 
<div class="foo"> <div><span>2</span></div></div> 
<div class="foo"> <div><span>1</span></div></div>

來源

2017-07-25 Harry

DOM元素對不起...：/ – Harry

它後馬上結束......

我已經與document.querySelectorAll（「div.foo」），但現在知道了如何檢查它們的風格='color：...'... – Harry

我想在最後找到div.foo，我只想找到包含style ='color：...'部分的類號...... foo [0 ]作爲例子...對不起，從一開始就沒有公佈所有細節...我會盡量在下次添加儘可能多的信息。感謝您花時間檢查我的問題:) – Harry

你可以找到所有使用querySelectorAll的div.foo元素。然後你就可以循環通過這些發現通過使用Array.prototype.find對待該集合就像一個數組包含有彩色風格span第一位的，而find回調中，使用querySelectorAll找到span s的一個style屬性，然後Array.prototype.some找到出是否其中之一有color風格（而不是別的什麼）：

// Find all `div.foo` elements 
 
var fooList = document.querySelectorAll("div.foo"); 
 

 
// Find the first one that contains a `span` with a color style 
 
var found = Array.prototype.find.call(fooList, function(div) { 
 
    // `some` stops the first time its callback returns a truthy value 
 
    return Array.prototype.some.call(div.querySelectorAll("span[style]"), function(span) { 
 
    return !!span.style.color; 
 
    }); 
 
}); 
 

 
// Show it 
 
console.log(found.outerHTML);

<div class="foo"><div><span style="color:yellow;">this one</span></div></div> 
 
<div class="foo"><div><span>1</span></div></div> 
 
<div class="foo"><div><span>2</span></div></div> 
 
<div class="foo"> <div><span>1</span></div></div>

注意，在some回調，我們使用的事實，一個元素的style對象的color屬性將是""（虛假值），因爲該元素上沒有內嵌樣式color。

請注意，我們不能使用字符串匹配，span[style*=color]一個屬性，因爲這將匹配我們不想元素（例如，<span style="border-color: green">）。

來源

2017-07-25 11:25:38

檢查多個類的樣式=「顏色：....」

回答

相關問題