Question

我正在寻找改变＆＃39; GetElementById＆＃39; div中的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'，但我需要更改＆＃34;内部人员＆＃34; div里面正是这个＆＃39;我点击了。

我只关注javascript解决方案，没有jquery。

Answer 1

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

给内幕div一个名为class的{{1}}名称并执行此操作：

insider

这可以通过将父div传递给带有关键字function runscript(object){ object.querySelector("div[class='insider']").style.color='red'; }的{{1}}函数来实现。然后runscript将尝试根据选择器this找到该元素。如果找到，它会将文本的颜色设置为红色。

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中做了一个小提琴：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）

3 个答案: