使用「;“如果声明”;获取Javascript中彩色文本的值

使用「;“如果声明”;获取Javascript中彩色文本的值,javascript,colors,getelementsbyclassname,Javascript,Colors,Getelementsbyclassname,我想做一件事,当你点击一个按钮时,文本会变成绿色,如果你再次点击,文本会变成蓝色。我这样做的策略是测试文本是绿色还是蓝色,但我不知道如何: var topcon = document.getElementsByClassName("topchoice"); function show() { if(topcon.style.color = "blue") { for (count=0; count < topcon.length; count++) {

我想做一件事,当你点击一个按钮时,文本会变成绿色,如果你再次点击,文本会变成蓝色。我这样做的策略是测试文本是绿色还是蓝色,但我不知道如何:

var topcon = document.getElementsByClassName("topchoice");

function show() {
    if(topcon.style.color = "blue") {
        for (count=0; count < topcon.length; count++) {
        topcon[count].style.color = "green";
        }
    }
    else if(topcon.style.color = "green") {
        for (count=0; count < topcon.length; count++) {
            topcon[count].style.color = "blue";
        }
    }
}
var topcon=document.getElementsByClassName(“topchoice”);
函数show(){
如果(topcon.style.color=“蓝色”){
用于(计数=0;计数
然而,这不起作用。当我调用
show()
函数时,它将保持相同的颜色。有人知道为什么这样不行吗


如果你想知道我为什么使用循环,那是因为没有数组你不能
getElementsByClassName
,因为元素与数组一起工作。

需要使用“==”的比较运算符,而不是“=”的赋值运算符。这也有点令人困惑,因为看起来您希望topcon是一个项目数组,在这种情况下,您还需要更改与所选元素的比较

var topcon = document.getElementsByClassName("topchoice");

function show() {
  var changeColor = "blue";
  if(topcon && topcon.length) {
    if(topcon[0].style.color === "blue") {
      changeColor = "green";
    } else {
      changeColor = "blue";
    }
    for (count=0; count < topcon.length; count++) {
       topcon[count].style.color = changeColor;
    }
  }
};
var topcon=document.getElementsByClassName(“topchoice”);
函数show(){
var changeColor=“蓝色”;
if(topcon和topcon.length){
如果(topcon[0].style.color==“蓝色”){
changeColor=“绿色”;
}否则{
changeColor=“蓝色”;
}
用于(计数=0;计数
需要使用“==”的比较运算符,而不是“=”的赋值运算符。这也有点令人困惑,因为看起来您希望topcon是一个项目数组,在这种情况下,您还需要更改与所选元素的比较

var topcon = document.getElementsByClassName("topchoice");

function show() {
  var changeColor = "blue";
  if(topcon && topcon.length) {
    if(topcon[0].style.color === "blue") {
      changeColor = "green";
    } else {
      changeColor = "blue";
    }
    for (count=0; count < topcon.length; count++) {
       topcon[count].style.color = changeColor;
    }
  }
};
var topcon=document.getElementsByClassName(“topchoice”);
函数show(){
var changeColor=“蓝色”;
if(topcon和topcon.length){
如果(topcon[0].style.color==“蓝色”){
changeColor=“绿色”;
}否则{
changeColor=“蓝色”;
}
用于(计数=0;计数
代码中有两个问题

  • 需要使用比较运算符
    ==
    ===
    进行比较
  • topcon
    是一个节点列表,因此它没有
    style
    属性。这将导致代码抛出一个错误,如
    uncaughttypeerror:cannotsetproperty'color'(无法设置未定义的属性)
var topcon=document.getElementsByClassName(“topchoice”);
函数show(){
var-el;
用于(计数=0;计数
1
1.
1.
1.

显示代码中有两个问题

  • 需要使用比较运算符
    ==
    ===
    进行比较
  • topcon
    是一个节点列表,因此它没有
    style
    属性。这将导致代码抛出一个错误,如
    uncaughttypeerror:cannotsetproperty'color'(无法设置未定义的属性)
var topcon=document.getElementsByClassName(“topchoice”);
函数show(){
var-el;
用于(计数=0;计数
1
1.
1.
1.

Show
您正在为其分配
=
您想要的
=
topcon
是一个节点集合,它没有style属性,因此您应该会得到一个错误
未捕获的TypeError:无法设置未定义的属性“color”
您想做什么?您是在尝试根据第一个元素的颜色更改所有元素的颜色,还是每个元素的颜色都必须独立切换如果您正在寻找类似于为其分配
=
的内容,您希望
==
topcon
是一个节点集合,它没有样式属性,因此,您应该得到一个错误
未捕获类型错误:无法设置未定义的属性“color”
您想做什么?您是在尝试根据第一个元素的颜色更改所有元素的颜色,还是每个元素的颜色都必须独立切换如果您正在寻找类似“谢谢您的建议”的内容,这将非常有用!但是,只有一个问题:当我尝试在CSS文件中设置文本样式时,当我尝试单击按钮时,它不会改变。顺便问一下,你知道如何解决这个问题吗?@MCGuy你能分享更多的细节吗?基本上,当我做
style=“color:green”
时,它可以工作,但当它在CSS文件中这样做时:
#topchoice{color:green}
当我调用
show()时,颜色不会改变
function-在IE10+中受支持-可以查找旧版本的PollyFill谢谢您的建议,这很有帮助!但是,只有一个问题:当我尝试在CSS文件中设置文本样式时,当我尝试单击按钮时,它不会改变。顺便问一下,你知道如何解决这个问题吗?@MCGuy你能分享更多的细节吗?基本上,当我做
style=“color:green”
时,它可以工作,但当它在CSS文件中这样做时:
#topchoice{color:green}
当我调用
show()时,颜色不会改变
函数-在IE10+中受支持-可以查找旧版本的PollyFill