JavaScript：更改HTML屬性

我正在使用Javascript來更改HTML屬性，在我的情況下，我有兩個相同燈泡開關的照片，我使用2個按鈕以「開啓」和「關閉」燈泡，但現在我想將這兩個按鈕替換爲第一個圖像中開啓的同一開關的兩個圖像，以及第二個圖像中開關關閉的圖像，如何操作？JavaScript：更改HTML屬性

<!DOCTYPE html> 
 
<html> 
 
<body> 
 

 
<h1>What Can JavaScript Do?</h1> 
 

 
<p>JavaScript can change HTML attributes.</p> 
 

 
<p>In this case JavaScript changes the src (source) attribute of an image.</p> 
 

 
<button onclick="document.getElementById('myImage').src='pic_bulbon.gif'">Turn on the light</button> 
 

 
<img id="myImage" src="pic_bulboff.gif" style="width:100px"> 
 

 
<button onclick="document.getElementById('myImage').src='pic_bulboff.gif'">Turn off the light</button> 
 

 
</body> 
 
</html>

enter image description here

來源

2017-02-25 Kujtim Hajdini

的可能的複製[如何添加/更新使用JavaScript的HTML元素的屬性？]（http://stackoverflow.com/questions/710275/how-to-add-update-an -attribute-to-html-element-using-javascript） –

嘗試改變這些

document.getElementById('myImage').src='pic_bulbon.gif'

到這些

document.getElementById('myImage').setAttribute("src", "pic_bulbon.gif");

來源

2017-02-25 23:32:11

沒有人，它不工作 –

@Kujtim Hajdini它必須工作。使用setAttribute函數。 https://jsfiddle.net/rd9d2a2q/1/ –

如果我理解你的問題，你希望'打開'按鈕是一個開關的圖像，而關閉按鈕是一個關閉開關的圖像。

您可以將background-image屬性添加到每個按鈕。

<button style="background:url('lightSwitchOn.gif'); background-size: 100px 100px;">Turn on the light</button> 

<button style="background:url('lightSwitchOff.gif'); background-size: 100px 100px;">Turn off the light</button>

你需要更多的css來調整按鈕大小的圖像。從CSS中取出CSS並存入一個css文件將有助於保持組織結構。

第二個選擇是將燈泡顯示爲圖像並處理它們的'onClick'事件。

來源

2017-02-26 00:53:32 2chur

上面的凱末爾向您展示瞭解決上述問題的方法，儘管您說這不起作用。那麼，證明它實際上必須工作。

<img id="myImage" src="http://placehold.it/150/000/fff" style="width:100px"> 
 

 
<button onclick='document.getElementById("myImage").setAttribute("src", "http://placehold.it/150/E8117F/000")'>PINK</button> 
 
<button onclick='document.getElementById("myImage").setAttribute("src", "http://placehold.it/150/000/fff")'>BLACK</button>

來源

2017-02-26 01:13:46

JavaScript：更改HTML屬性

回答

相關問題