javascript - 更改具有相同 id 的每个 div 元素的颜色,该 id 等于一些文本

标签 javascript html

我正在尝试更改具有相同 id 的每个 div 元素的背景颜色,该 id 等于某些特定文本。下面的代码仅适用于我代码中的第一个 div。我如何将它应用于每个具有相同 id 和内部特定文本的 div。

好的。我知道 Id 需要是唯一的。你能帮我在类里面做到这一点吗?

<!DOCTYPE html>
<html>
<head>
<style> 

</style>
</head>
<body>

<div id="myDIV">
 Hello
</div>


<div id="myDIV">
 Hello
</div>

<script>

if (document.getElementById('myDIV').innerHTML.indexOf("Hello") != -1) {
document.getElementById('myDIV').style.backgroundColor='blue';
} 
</script>

</body>
</html> 

最佳答案

是的,id 必须是唯一的。

var targets = document.getElementsByClassName('myDIV');
for( var i in targets ) {
    if (targets[i].innerHTML.indexOf("Hello") != -1) {
        targets[i].className='myDIV blue';
    }  
};

然后在样式中添加颜色:

.blue { background-color: blue; }

这是一个 fiddle : https://jsfiddle.net/mckinleymedia/5nj7yw2e/1/

关于javascript - 更改具有相同 id 的每个 div 元素的颜色,该 id 等于一些文本,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33717883/

相关文章:

javascript - 没有 jQuery 的 Vue.js 中带有固定标题的粘性侧边栏

javascript - 单击图像时播放声音文件

javascript - coSTLy 如何使用 JavaScript 加载图像?

javascript - 正则表达式 - 替换 HTML 字符串中不包含在 HTML 标记中的文本

javascript - HTML - 从底部裁剪 iframe

javascript - Bootstrap 3.2 下拉菜单切换在 iPhone 上不起作用

javascript - 有哪些方法可以降低 Angular Controller 的复杂性(使用 ui-router)?

html - jsfiddle layout broken : wrong input size. 大小存储在哪里?

javascript - 使用 javascript 生成多个 html 输入

html - 列表对齐方式错误