javascript 类似于 this.getelementbyid(这个 div 中元素的 id)
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/27892695/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Something like this.getelementbyid(id of element inside this div)
提问by Simon
I am looking for way to change 'GetElementById' div inside the div, which I am targeting.
我正在寻找更改 div 内的“GetElementById”div 的方法，这是我的目标。
Here's the example:
这是示例：
Let's say I have this
假设我有这个
<div onclick="runscript()">
<div id="insider">
</div>
</div>
<div onclick="runscript()">
<div id="insider">
</div>
</div>
<script>
function runscript(){
document.getElementById('insider').style.color='red';
}
</script>
If I would like to change exactly the same div, which I am clicking on, I could use this.style.color='red', but I need to change "insider" div inside exactly 'this' div I'm clicking on.
如果我想更改我正在单击的完全相同的 div，我可以使用this.style.color='red'，但我需要在我单击的“这个”div 内更改“内部”div。
I am looking only for javascript solution, no jquery.
我只在寻找 javascript 解决方案，没有 jquery。
回答by Mouser
<div onclick="runscript(this)">
<div class="insider">
Sample text
</div>
</div>
Give the insider div a classname called insiderand do this:
给内部 div 一个class名称，insider然后执行以下操作：
function runscript(object){
object.querySelector("div[class='insider']").style.color='red';
}
This works by passing the parent div to the runscriptfunction with the keyword this. Then querySelectorwill try to find the element based upon the selector div[class='insider']. If found it will set the color of the text to red.
这是通过将父 div 传递给runscript带有关键字的函数来实现的this。然后querySelector将尝试根据选择器查找元素div[class='insider']。如果找到，它将文本的颜色设置为红色。
回答by progsource
<div onclick="runscript(this)">
<div class="insider">
</div>
</div>
<div onclick="runscript(this)">
<div class="insider">
</div>
</div>
<script>
function runscript(object){
object.querySelector('.insider').style.color='red';
}
</script>
like in the comments above
就像上面的评论一样
- id is an unique identifier - so it is not valid to have an id twice in your DOM
- I recommend you to use addEventListener instead of the onclick attribute
- id 是唯一标识符 - 因此在您的 DOM 中具有两次 id 是无效的
- 我建议您使用 addEventListener 而不是 onclick 属性
回答by Michelangelo
I made a fiddle in pure javascript: http://jsfiddle.net/53bnhscm/8/
我用纯 javascript 做了一个小提琴：http: //jsfiddle.net/53bnhscm/8/
HTML:
HTML：
<div onclick="runscript(this);">
<div class="insider"></div>
</div>
<div onclick="runscript(this);">
<div class="insider"></div>
</div>
CSS:
CSS：
div {
border: 1px solid black;
height: 100px;
}
.insider {
border: 3px solid green;
height: 20px;
}
Javascript:
Javascript：
function runscript(x) {
x.firstElementChild.style.border = '1px solid red';
}
