JavaScript - Element.closest未獲取樣式

Question

我一直在瀏覽JavaScript上的MDN文檔，並且遇到了Element.closest屬性。這仍然只是一個實驗性的屬性，但瞭解如何使用它是很重要的。

這裏的規範說什麼

的Element.closest（）方法返回當前元素（或當前元素本身），其參數給出的選擇相匹配的最近的祖先。如果沒有這樣的祖先，它將返回null。

https://developer.mozilla.org/en-US/docs/Web/API/Element/closest

var par = document.getElementById('my-id'); 
 

 
par.closest("h2").style.background = "yellow";

<div id="first"> 
 
    <h2>Heading</h2> 
 
    <div id="second"> 
 
    <div id="third">  
 
     <p id="my-id">This is a paragraph</p> 
 
    </div> 
 
    </div> 
 
</div>

我使用最新版本的谷歌瀏覽器。根據兼容性圖表，這應該在谷歌瀏覽器41 +

我找不到任何理由爲什麼這不起作用。

任何理論？

Answer 1

正如你所說，此方法返回closest ancestor，這取決於你把selector的。你的情況h2不是#my-id的祖先，也不能返回本身，因爲它們不是同一類型，所以結果爲空。如果更改p#my-id到h2#my-id它會工作：

正是在這個例子的工作：

var par = document.getElementById('my-id'); 
 

 
par.closest("h2").style.background = "yellow"; //returns itself 
 
par.closest("#first").style.color = "red"; // change color of an ancestor

<div id="first"> 
 
    <h2>Heading</h2> 
 
    <div id="second"> 
 
    <div id="third"> 
 
     <h2 id="my-id">This is a paragraph</h2> 
 
    </div> 
 
    </div> 
 
</div>

Answer 2

我始終認爲，偉大的叔叔是祖先。要訪問標題，他們可以使用uncle selector。

您可以使用#closest找到您的祖父，然後使用previousElementSibling找到他的哥哥。

var par = document.getElementById('my-id'); 
 

 
par.closest("#second").previousElementSibling.style.background = "yellow";

<div id="first"> 
 
    <h2>Heading</h2> 
 
    <div id="second"> 
 
    <div id="third">  
 
     <p id="my-id">This is a paragraph</p> 
 
    </div> 
 
    </div> 
 
</div>

必須指出的是，這並不在IE瀏覽器，並只適用於Chrome的版本41+。 Chrome 41僅在一年前發佈。