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

回答

相关问题