Question

我觉得我正在敲打砖墙，无法弄清楚我做错了什么，我写了一些JS从数组中选择一个随机颜色，然后我想将类的颜色更改为那种颜色：

我已经尝试将类更改为class="button1"，但仍然没有，我还添加了警报，所有内容似乎都通过了ok，直到changeElementColor的最后一行没有任何反应。< / p>

此外，如果我可以使用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>

感谢您的帮助！

Answer 1

getElementsByClassName()会返回collection of elements，而非1个元素，因此obj.style将无效。

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

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

演示：Fiddle

Answer 2

尝试以下操作。

我已经使用了jQuery事件和选择器来完成所有这些操作。

＆＃13;

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);
  

}

＆＃13;

[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;
}

＆＃13;

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

＆＃13;

Answer 3

稍微修改了你的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>

Answer 4

如果我理解正确，您需要在单击时更改类的颜色。执行此操作的一种简单方法是在单击元素时使用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/

JavaScript改变类的背景颜色

4 个答案: