类似于 this.getelementbyid（此 div 中元素的 ID）

Question

我正在寻找在 div 中更改 'GetElementById' div 的方法，这是我的目标。

示例如下：

假设我有这个

<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>

如果我想更改完全相同的 div，我可以使用 this.style.color='red'，但我需要更改 "insider" div里面正好 'this' div 我正在点击。

我只在寻找 javascript 解决方案，没有 jquery。

Answer 1

<div onclick="runscript(this)">
   <div class="insider">  
        Sample text
   </div> 
</div>

给内部人员 div 一个名为 insider 的 class 并执行此操作：

function runscript(object){
    object.querySelector("div[class='insider']").style.color='red';
}

这通过将父 div 传递给带有关键字 this 的 runscript 函数来实现。然后 querySelector 将尝试根据选择器 div[class='insider'] 查找元素。如果找到它会将文本的颜色设置为红色。

Answer 2

<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>

喜欢上面的评论

id 是唯一标识符 - 因此在您的 DOM
我建议你使用 addEventListener 而不是 onclick 属性

Answer 3

我在纯javascript中做了一个fiddle：http://jsfiddle.net/53bnhscm/8/

HTML:

<div onclick="runscript(this);">
    <div class="insider"></div>
</div>
<div onclick="runscript(this);">
    <div class="insider"></div>
</div>

CSS:

div {
    border: 1px solid black;
    height: 100px;
}
.insider {
    border: 3px solid green;
    height: 20px;  
}

Javascript:

function runscript(x) {
    x.firstElementChild.style.border = '1px solid red';
}

类似于 this.getelementbyid（此 div 中元素的 ID）

Something like this.getelementbyid(id of element inside this div)

html

javascript

getelementbyid