JavaScript更改类的背景颜色

JavaScript to change background color of class

本文关键字：背景 颜色 JavaScript      更新时间：2023-09-26

我觉得我的头撞到了砖墙上，不知道我做错了什么，我写了一些JS从数组中随机选择一种颜色，然后我想把类的颜色改成这种颜色：

我也尝试过将类更改为仅class="button1"，但仍然没有，我还添加了警报，直到changeElementColor的最后一行，一切似乎都通过了ok。

此外，我更希望我可以使用类似changeElementColor(this.element)的东西，而不是将其输入到HTML中，这可能吗？

    var colorArray = ["#aa3333", "#33aa33", "#3333aa", "#aaaa33", "#33aaaa", "#aa33aa", "#aa6633", "#66aa33", "#33aa66"];
    
    function getRandomInt(min, max) {
    return Math.floor(Math.random() * (max - min + 1)) + min;
    }
    function chooseRandomColor() {
    var randomInt = getRandomInt(0,colorArray.length);
    return colorArray[randomInt];    
    }
    function changeElementColor(elementString) {
    alert(elementString);
    var obj = document.getElementsByClassName(elementString);
    alert(obj);
    var color = chooseRandomColor();
    alert(color)
    obj.style.backgroundColor = color;
    }
    [class^="button"] {
    background-color: #333333;
    float: left;
    margin: 5px;
    color: #aaaaaa;
    text-align: center;
    display: table;
    }
    
    [class^="button"] span {
    display: table-cell; 
    vertical-align: middle; 
    text-align: center; 
    }
    
    .button1 {
    background-color: #3333ff;
    }
    
    .sm-sq-butt {
    font-size: 10px;
    height: 60px;
    width: 60px;
    }
    
    .md-sq-butt {
    font-size: 20px;
    height: 120px;
    width: 120px;
    }
 <a href="#"><div onclick="changeElementColor('button1')" class="button1 md-sq-butt"><span>HOME</span></div></a>

谢谢你的帮助！

getElementsByClassName（）返回一个元素集合，而不是一个元素，因此obj.style将不可用。

因此，您需要访问集合中的每个元素并更改样式（使用循环）。

for (var i = 0; i < obj.length; i++) {
    obj[i].style.backgroundColor = color;
}

演示：Fiddle

请尝试以下操作。

我已经使用jQuery事件和选择器在短行中完成了这一切。

var colorArray = ["#aa3333", "#33aa33", "#3333aa", "#aaaa33", "#33aaaa", "#aa33aa", "#aa6633", "#66aa33", "#33aa66"];
function getRandomInt(min, max) {
return Math.floor(Math.random() * (max - min + 1)) + min;
}
function chooseRandomColor() {
var randomInt = getRandomInt(0,colorArray.length);
return colorArray[randomInt];    
}
$('.button1').click(function(){
  changeElementColor('.button1');
});
function changeElementColor(elementString) {
alert(elementString);
  var color = chooseRandomColor();
  $(elementString).css('background-color',color);
  
}
[class^="button"] {
background-color: #333333;
float: left;
margin: 5px;
color: #aaaaaa;
text-align: center;
display: table;
}
[class^="button"] span {
display: table-cell; 
vertical-align: middle; 
text-align: center; 
}
.button1 {
background-color: #3333ff;
}
.sm-sq-butt {
font-size: 10px;
height: 60px;
width: 60px;
}
.md-sq-butt {
font-size: 20px;
height: 120px;
width: 120px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="#"><div class="button1 md-sq-butt"><span>HOME</span></div></a>

稍微修改了您的javascript，这应该可以工作了。

var colorArray = ["#aa3333", "#33aa33", "#3333aa", "#aaaa33", "#33aaaa", "#aa33aa", "#aa6633", "#66aa33", "#33aa66"];
function getRandomInt(min, max) {
  return Math.floor(Math.random() * (max - min + 1)) + min;
}
function chooseRandomColor() {
  var randomInt = getRandomInt(0, colorArray.length);
  return colorArray[randomInt];
}
changeElementColor = function(elementString) {
  console.log(elementString);
  var obj = document.getElementsByClassName(elementString);
  console.log(obj);
  var color = chooseRandomColor();
  console.log(color)
  obj[0].style.backgroundColor = color;
}
[class^="button"] {
  background-color: #333333;
  float: left;
  margin: 5px;
  color: #aaaaaa;
  text-align: center;
  display: table;
}
[class^="button"] span {
  display: table-cell;
  vertical-align: middle;
  text-align: center;
}
.button1 {
  background-color: #3333ff;
}
.sm-sq-butt {
  font-size: 10px;
  height: 60px;
  width: 60px;
}
.md-sq-butt {
  font-size: 20px;
  height: 120px;
  width: 120px;
}
<a href="#">
  <div onclick="changeElementColor('button1')" class="button1 md-sq-butt"><span>HOME</span>
  </div>
</a>

如果我理解正确，您希望在单击时更改类的颜色。一个简单的方法是在单击元素时使用this关键字，并将其传递到changeElementColor函数中。

onclick="changeElementColor(this)"

然后访问：

function changeElementColor(elementString) {
var color = chooseRandomColor();
elementString.style.color = color //Changes the text color
elementString.style.backgroundColor = color //Changes the background color
}

这是小提琴：http://jsfiddle.net/k1s0zng5/3/

相关文章：