JavaScript - Element.closest未获取样式
我一直在浏览JavaScript上的MDN文档,并且遇到了Element.closest
属性。这仍然只是一个实验性的属性,但了解如何使用它是很重要的。JavaScript - 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 +
我找不到任何理由为什么这不起作用。
任何理论?
正如你所说,此方法返回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>
我一直认为伟大的叔叔是祖先。感谢您指出这一点 –
我始终认为,伟大的叔叔是祖先。要访问标题,他们可以使用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仅在一年前发布。
“*我一直认为伟大的叔叔是祖先*”好吧,当术语借用其他学科时会出现这种混淆。但是,如果你认为叔叔是婚姻而不是祖先(例如,你母亲的姐姐的丈夫),所以一个兄弟姐妹关系,不直接世袭。 ;-) – RobG
这可能有助于理解DOM术语:http://felix-kling.de/images/DOM_relationship.png。 –
...如果你是'par.closest('#third')。style.background =“yellow”;'那会起作用.. –
如果我理解的很好,他的问题是为什么'.closest()'不返回元素本身,因为没有匹配的'h2'父项 –