使用JavaScript更改頁面元素DOM

-2

問候同伴Stackoverflowers。我試圖通過使用JavaScript單擊按鈕來更改文本，圖像和顏色。有沒有任何有效的方法來做到這一點？這裏是My example Website。我試圖讓愛德華·斯諾登的圖像，描述和列表隨着一個按鈕改變，然後再次點擊時恢復爲原始的！謝謝您的幫助！使用JavaScript更改頁面元素DOM

來源

2017-06-15 Marvinhozi

你知道如何對鼠標點擊做出反應，並修改元素？您需要更具體地瞭解您所問的內容，因爲這是一個非常廣泛的問題。 – Carcigenicate

在網頁中使用Javascript有很多教程。 SO不是學習工藝的替代品。 – Barmar

這樣做其實很簡單。下面是一個例子：

<!DOCTYPE html> 
<html> 
<body> 

<img id="image" src="image1.gif"> 
<p id="text">Old text</p> 
<button onclick="change()">Click Me</button> 

<script> 
function change() { 
    document.getElementById("image").src = "image2.jpg"; 
    document.getElementById("text").innerHTML = "new text"; 
} 
</script> 

</body> 
</html>

你聲明帶有ID的元素，並用onclick事件製作一個按鈕。點擊該按鈕後，將運行change()功能，該功能將image的src更改爲image2.jpg和text的文本爲new text。

如果你想讓它改回來，你可以嘗試這樣的事：

<!DOCTYPE html> 
<html> 
<body> 

<img id="image" src="image1.gif"> 
<p id="text">Old text</p> 
<button onclick="change()">Click Me</button> 

<script> 
var element1; 
var element2; 

function change() { 

    element1 = document.getElementById("image") 
    element2 = document.getElementById("text") 

    if (element1.src == "image2.jpg") { 
     element1.src = "image1.gif" 
     element2.innerHTML = "Old text" 
    } else { 
     element1.src = "image2.jpg" 
     element2.innerHTML = "new text" 
    } 

} 
</script> 

</body> 
</html>

來源

2017-06-15 00:26:19 keeganjk

謝謝你的幫助！但是，如何在按鈕再次單擊時返回原始內容？ – Marvinhozi

@Marvinhozi看到我的新編輯。 – keeganjk

This method is for Jquery. 

$(document).on('click', '.btn-color1', function(){ 
     $(this).addClass('btn-color2'); 
     $('.container').addClass('changecolor2'); 
    }); 

    $(document).on('click', '.btn-color2', function(){ 
     $(this).removeClass('btn-color1'); 
     $('.container').removeClass('changecolor2'); 
     $('.container').addClass('changecolor3'); 
    }); 

<style> 
     .btn-color1{ 
      color: #fff; 
      background-color: red; 
      padding: 10px; 
     } 

     .btn-color2{ 
      color: #fff; 
      background-color: blue; 
      padding: 10px; 
     } 

     .changecolor2{ 
      background-color: blue; 
     } 

</style>

來源

2017-06-15 01:21:12

使用JavaScript更改頁面元素DOM

回答

相關問題