當你點擊另一個元素時，改變javascript中一個元素的CSS風格

當我點擊輸入元素時，我想更改具有「input-group-addon」類的div的背景：當你點擊另一個元素時，改變javascript中一個元素的CSS風格

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

但它不起作用。我不得不犯錯，但我沒有看到它... 預先感謝您。

來源

2017-08-04 Paulina Półchłopek

'EL [0] .style。 backgroundColor'這樣做，因爲'getElementsByClassName'返回給定類名稱的元素數組 – Durga

我認爲你必須添加[0] el el el el.s tyle。 – dec

document.getElementsByClassName()返回array-like object。要更新一個元素，你必須指定一個索引。

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

來源

2017-08-04 09:51:12 Aer0

它返回一個HTMLCollection（一個像數組的項目） – Endless

你的問題 - getElementsByClassName方法返回元素

只有做到這一點的數組： el[0].style.backgroundColor = '#cc0c8e';

而且你還可以使用document.querySelector('.input-addon-group')代替 getElementsByClassName

來源

2017-08-04 09:54:03 fabledva

當你點擊另一個元素時，改變javascript中一個元素的CSS風格

回答

相關問題