Question

当我点击输入元素时，我想更改具有“input-group-addon”类的div的背景：

<div class="form-group col-sm-12 col-md-5">
    <label class="sr-only" for="exampleInputEmail">Email address</label>
    <div class="input-group" >
        <div class="input-group-addon">
            <img src="pictures/email.png" alt="Email" />
        </div>
        <input type="email" class="form-control" id="exampleInputEmail" placeholder="Email Adress" onclick="changeBackground()">
    </div>
</div>

我创建了javascript文件background.js：

function changeBackground() {
    var el = document.getElementsByClassName('input-group-addon');
    el.style.backgroundColor = "#cc0c8e";
}

我将它插入html文件的末尾：

<script src="js/background.js"></script>

但它不起作用。我不得不犯错，但我没有看到它...... 提前谢谢。

Answer 1

document.getElementsByClassName()返回array-like object。要更新元素，您需要指定索引。

var el = document.getElementsByClassName('input-group-addon')[0];

Answer 2

您的问题 - getElementsByClassName返回元素数组

只需这样做： el[0].style.backgroundColor = '#cc0c8e';

您也可以使用document.querySelector('.input-addon-group')代替 getElementsByClassName

单击另一个元素时，在javascript中更改一个元素的css样式

2 个答案: