JavaScript 如何通过点击一个按钮来改变文本和图像 |
您所在的位置：网站首页 › js图片点击切换按钮 › JavaScript 如何通过点击一个按钮来改变文本和图像 |
|
JavaScript 如何通过点击一个按钮来改变文本和图像
使用JavaScript可以很容易地改变一个特定元素的文本和一个img元素中的图像。我们可以使用HTML文档中的按钮元素的onclick事件，在点击按钮的时候实现这一功能。为了在点击按钮时改变文本，我们给onclick事件分配一个函数，作为执行所需变化的值。 让我们借助代码实例详细了解一下使用JavaScript单独改变文本和图像的方法。 改变一个元素的文本JavaScript为我们提供了两个不同的属性来改变或获取HTML文档中某个元素的文本，下面列出了这两个属性的功能和语法。 innerText – JavaScript的innerText属性用于改变前一个文本，或者从HTML文档中获取某个特定元素的前一个文本。 语法下面的语法将告诉你如何使用innerText属性来获取和改变一个元素的文本。 selected_element.innerText = " new text "; innerHTML – innerHTML属性不仅可以给出一个元素的文本及其内部使用的所有子标签，而且还可以改变一个元素的文本，并在新文本中使用子标签。 语法下面的语法将告诉你如何使用innerHTML属性来获得或改变一个元素的文本 − selected_element.innerHTML = " new text ";让我们通过代码实例中的实际实现来理解这两个属性： 算法 第 1步– 在第1步，我们将在HTML文档中添加输入元素。这样，我们就可以用用户输入的文本来改变下面段落的文本。第2步– 在这一步中，我们将添加一个按钮标签，该标签有一个与之相关的onclick事件，该事件以一个函数为值，当用户点击按钮并改变段落的文字时，调用该函数。 第 3步– 在下一步，我们将定义一个JavaScript函数，我们将抓取用户输入的文本，并使用innerText和innerHTML属性来改变页面下面的段落文本。 例子下面的例子将向你解释如何实际使用 innerText 和 innerHTML 属性来改变一个元素的文本。 Changing an Text of an element in the HTML document using JavaScript.The text of the below element will be replaced by the text you enter in input bar once you click the button. Click to change the TextThis is the initial text of Para1. This is the initial text of Para2. var para1 = document.getElementById("para1"); var para2 = document.getElementById("para2"); function changeImage() { var inp = document.getElementById("inp"); var enteredText = inp.value; para1.innerText = enteredText + ", This text is changed using the innerText property. "; para2.innerHTML = " " + enteredText + " " + ", This text is changed using the innerHTML property. "; }在上面的例子中，我们使用innerText和innerHTML属性改变了两个不同段落的文本。前一个段落的文本是用innerText属性改变的。而后面一段的文本则使用innerHTML属性来改变。 在点击按钮时改变图像我们已经讨论过如何使用JavaScript来改变HTML文档中一个元素的文本。现在，我们将讨论如何通过点击按钮来改变图像。 JavaScript允许我们使用 src 属性来改变，也允许我们在src属性中获取给定链接的值或给定图片的地址。 语法下面的语法将显示如何使用 src 属性来改变网页上的图像 — selected_img_element.src = " new link or address ";现在让我们借助JavaScript代码实例来了解src属性的实际实现，以改变图像 算法 第1步，我们将在HTML文档中添加一个带有src属性的 img 元素，该元素包含一些初始值，随后我们将使用JavaScript在src属性的帮助下改变该值。第2步 – 在下一步，我们将添加一个带有onclick事件的按钮元素，当按钮被点击时，它将调用一个函数。 第 3步– 在这一步，我们将定义JavaScript函数，并通过它的id抓取里面的img元素。 第4步– 在最后一步，我们将使用src属性改变src属性的值，并给它一个新的值，以便在网页上显示一些新的图片。每次点击按钮，用户都会在两张图片之间进行切换。 例子下面的例子将解释src属性如何获取新的值来替换src属性的前一个值以及网页上的前一张图片。 Changing an Image in the HTML document using JavaScriptThe image shown below will be changed once you click the button. Click to change the Imagevar result = document.getElementById("result"); var upper = document.getElementById("upper"); function changeImage() { var image = document.getElementById("image"); if (image.src == "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcR1GyK6fiCHCRcizXh_dXsFBA5Idw7XayKizQ&usqp=CAU") { image.src = "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSoLnvRnTNP2rojd7e9b_Ilw5zZkSlPotSPIA&usqp=CAU"; result.innerHTML += " The image is changed from Light mode to Dark mode . "; } else { image.src = "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcR1GyK6fiCHCRcizXh_dXsFBA5Idw7XayKizQ&usqp=CAU"; result.innerHTML += " The image is changed from Dark mode to Light mode . "; } upper.innerHTML = " The previous image is replaced by the new image as you click the button. "; } 在上面的例子中，我们使用了src属性来改变img元素的src属性值和网页上的实际图像。 在这篇文章中，我们已经了解了使用JavaScript改变网页上元素的文本的两种不同方法，以及改变网页上的图像的方法，并为每一种方法提供了代码示例。这些例子将帮助你提高你对JavaScript的实践知识。 |
今日新闻 |
推荐新闻 |
| CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |