首頁猿問如何使按鈕在單擊時更改背景和文本顏色

如何使按鈕在單擊時更改背景和文本顏色

JavaScript

守候你守候我 2021-11-12 10:54:52

我正在嘗試創建一個按鈕來更改整個頁面的背景顏色和一些文本顏色，但我無法使其工作。背景目前正在工作，但文本不會改變顏色。我希望“changeText”影響類而不是 Id。我對 JavaScript 的了解為零，所以很難知道出了什么問題。這是代碼：var colors = ["green", "red", "blue"];var colorIndex = 0;function changeText() { var col = document.getElementsByClassname("textcolor"); if (colorIndex >= colors.length) { colorIndex = 0; } col.body.style.color = colors[colorIndex]; colorIndex++;}var colors = ["red", "blue", "green"];var colorIndex = 0;function changeBackground() { var col = document.getElementById("bodycolor"); if (colorIndex >= colors.length) { colorIndex = 0; } col.style.backgroundColor = colors[colorIndex]; colorIndex++;}<body id='bodycolor'> <h1 class="textcolor">Title Color Change</h1><br> <p class="textcolor">Text Color Change </p><br> <button type="button" onclick="changeBackground();changeText();">Click me</button></body>

查看完整描述

3 回答

汪汪一只貓

TA貢獻1898條經驗獲得超8個贊

背景更改有效，因為 getElementById 只返回一個可以設置樣式屬性的元素。

getElementsByClassName() 但是返回一個項目集合。您將不得不迭代它并更改每個元素的樣式元素。嘗試這個：

function changeText() {

var col = document.getElementsByClassName("textcolor");

if (colorIndex >= colors.length) {

colorIndex = 0;

}

for(var i = 0; i < col.length; i++){

col[i].style.color = colors[colorIndex];

}

colorIndex++;

}

此外，您不需要 .body 來設置樣式。

反對回復 2021-11-12

海綿寶寶撒

TA貢獻1809條經驗獲得超8個贊

你為什么不給它唯一的 ID 并檢查它

let colors = ["green", "red", "blue"];

let colorIndex = 0;

function changeBackground() {

let col = document.getElementById("bodycolor");

if (colorIndex >= colors.length) {

colorIndex = 0;

}

col.style.backgroundColor = colors[colorIndex];

colorIndex++;

let h1Color = document.getElementById("h1Color")

let pColor = document.getElementById("pColor");

if (colorIndex >= colors.length) {

colorIndex = 0;

}

h1Color.style.color = colors[colorIndex];

pColor.style.color = colors[colorIndex];

colorIndex++;

}

<h1 id="h1Color">Title Color Change</h1><br>

<p id="pColor">Text Color Change </p><br>

<button type="button" onclick="changeBackground()">Click me</button>

</body>

反對回復 2021-11-12

飲歌長嘯

TA貢獻1951條經驗獲得超3個贊

getElementsByClassName 返回包含提到的類名的所有元素的數組

嘗試

col[0].style.color = colors[colorIndex];

這是您的工作示例

訪問https://codepen.io/vikas_saini/pen/jOOErNZ

反對回復 2021-11-12

3 回答
0 關注
259 瀏覽

關注

添加回答

舉報

0/150

提交

取消

亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

熱搜

最近搜索清空

如何使按鈕在單擊時更改背景和文本顏色

如何使按鈕在單擊時更改背景和文本顏色

3 回答

添加回答