如何編寫 function 以在單擊其指定按鈕時獲取不同的背景圖像和文本？

Question

我知道根據其按鈕調用文本的腳本，但我不知道如何在該文本上放置背景圖像。 我的計划是背景圖像也可以根據單擊的按鈕進行更改。 這是我到目前為止所做的......

這實際上是針對學校項目的，我希望它以行動為導向或以某種方式與功能和方法互動。 我還想添加另一個單元格表，並在其中放置一個帶有一些文本的圖像，就像游戲頭像配置文件一樣。

 function myFunction(elem) { var x = document.getElementById("js-description"); var description = elem.getAttribute('data-description'); x.innerHTML = description; var button = document.getElementsByClassName('js-button'); for (var i = 0; i < button.length; i++) { button[i].classList.remove('active-buton'); } elem.classList.add('active-button'); }

 body, html { height: 100%; background-color: #190a48; margin: 0; }.btn-group button { font-family: SF; letter-spacing: 5px; background-color: transparent; /* Green background */ border: 1px solid #504c7c; /* Green border */ color: white; /* White text */ padding: 2.5% 1%; /* Some padding */ cursor: pointer; /* Pointer/hand icon */ width: 15vw; height: 6vw; /* Set a width if needed */ display: block; /* Make the buttons appear below each other */ margin-left: 20%; border-radius: 4%; -webkit-box-shadow: inset 1px 6px 12px #544e88, inset -1px -10px 5px #2e2d3a, 1px 2px 1px #2e2d3a; -moz-box-shadow: inset 1px 6px 12px #544e88, inset -1px -10px 5px #2e2d3a, 1px 2px 1px #2e2d3a; box-shadow: inset 1px 6px 12px #544e88, inset -1px -10px 5px #2e2d3a, 1px 2px 1px #2e2d3a; font-size: 1vw; }.btn-group button:not(:last-child) { border-bottom: none; /* Prevent double borders */ }.active-button:hover { background-color: #83a1a7; }.description { text-align: center; color: white; font-size: 50px; font-family: St; letter-spacing: 3px; }

 <table> <tr> <td rowspan="2" width=1000px; style="border: 7px solid #040434;"> <div id="js-description" class="description"> </div> </td> </tr> <tr> <td rowspan="4" height=450px; class="imgxbtn" style="transparent;"> <div class="js-button btn-group"> <button data-description="Vivamus, moriendum est" onclick="myFunction(this)"> HOBBY </button> <button data-description="Forsan et haec olim meminisse iuvabit" onclick="myFunction(this)"> MEMORY </button> <button data-description="Sapere aude" onclick="myFunction(this)"> CONQUEST </button> <button data-description="Audentes fortuna iuvat" onclick="myFunction(this)"> AMBITION </button> <button data-description="Ad astra per aspera" onclick="myFunction(this)"> TARGET </button> </div> </td> </tr> <tr> <td rowspan="3" height=250px; style="border: 5px solid #040434; opacity:35%; background-color: #9a5eaa;">content</td> </tr> <tr> </tr> </table>

Answer 1

你快到了。 您可以對背景圖像使用與描述文本相同的方法。 只需使用您的圖像 url 定義另一個數據屬性並設置相應的 CSS 屬性，如下所示：

 function onButtonClick() { var descriptionElement = document.getElementById("description"); descriptionElement.innerHTML = event.target.dataset.description; descriptionElement.style['background-image'] = event.target.dataset.backgroundImage; }

 <div id="description">Press one of the buttons below.</div> <button data-description="First description" data-background-image="linear-gradient(red, orange)" onclick="onButtonClick()">first</button> <button data-description="Second description" data-background-image="linear-gradient(teal, green)" onclick="onButtonClick()">second</button>

我在這里使用漸變，因為我手頭沒有圖像。 要使用實際圖像，您可以將其指定為data-background-image="url('path/to/your/image')" 。