Question

我有一个用html，css和JS设计的网页。我把它们正确地连接起来，但由于某种原因我的标题不会做我想要的。我已经尝试了一切，有谁知道我哪里出错了？

我想要它，以便当我将鼠标悬停在标题上或点击标题时，颜色会发生变化。这不会发生。

JS-Fiddle中的重要代码：https://jsfiddle.net/DITTO/c37zxdke/

//javascript
var col = document.getElementById("webTitle").style.color;

function orangeToBlue() {
    col = "#197CFF";
}
function blueToGreen() {
    col = "#19FF29";
}
function greenToPink() {
    col = "#FF19EF";
}
function pinkToOrange() {
    col = "#FF9C19";
}



function changeColor() {
    if (document.getElementById("webTitle").style.color === "#FF9C19") {
        orangeToBlue();
} else if (document.getElementById("webTitle").style.color === "#197CFF") {
        blueToGreen();
    } else if (document.getElementById("webTitle").style.color === "#19FF29") {
        greenToPink();
    } else if(document.getElementById("webTitle").style.color === "#FF19EF") {
        pinkToOrange();
    }
}


//html
<h1 id="webTitle" onmouseover="changeColor()">Webpage Title</h1>


//css
#webTitle:hover {
    cursor: pointer;
}
#webTitle {
    text-shadow: 3.5px 3.5px 0px rgba(0, 0, 0, 0.3);
    font-size: 100px;
    font-family: fantasy;
    color: #FF9C19;
}

Answer 1

你有没有想要得到什么？ document.getElementById("webTitle").style.color输出？

当我记录此动作时，它会给我一个空白字符串，你能确认吗？

如果你有相同的空白字符串，那么看看这个post答案看起来非常好，并且有很好的链接。

或者您可以查看此answer（来自副本）。

希望它会帮助你一点。

Eduardo Escobar的答案也很重要。

Answer 2

你的函数orangeToBlue（），blueToGreen（），greenToPink（）和pinkToOrange（）没有任何效果，虽然它们被调用，但它们只是定义一个变量，没有别的。

Answer 3

您应该在javaScript中使用rgb（rrr，ggg，bbb）颜色值，使用#rrggbb颜色值和CSS来设置文本的初始颜色。

//javascript

        document.getElementById("webTitle").style.color = "#197CFF";
        function orangeToBlue() {
            document.getElementById("webTitle").style.color = "#197CFF";
        }

        function blueToGreen() {
            document.getElementById("webTitle").style.color = "#19FF29";
        }

        function greenToPink() {
            document.getElementById("webTitle").style.color = "#FF19EF";
        }

        function pinkToOrange() {
            document.getElementById("webTitle").style.color = "#FF9C19";
        }



        function changeColor() {
            if (document.getElementById("webTitle").style.color === "rgb(255, 156, 25)") {
                orangeToBlue();
            }
            else
            if (document.getElementById("webTitle").style.color === "rgb(25, 124, 255)") {
                blueToGreen();
            }
            else
            if (document.getElementById("webTitle").style.color === "rgb(25, 255, 41)") {
                greenToPink();
            }
            else
            if (document.getElementById("webTitle").style.color === "rgb(255, 25, 239)") {
                pinkToOrange();
            }
        }


//html
<h1 id="webTitle" onclick="changeColor()" style="color: #FF9C19;" >Webpage Title</h1>



//css
 #webTitle:hover {
            cursor: pointer;
        }
        #webTitle {
            text-shadow: 3.5px 3.5px 0px rgba(0, 0, 0, 0.3);
            font-size: 100px;
            font-family: fantasy;
        }

Answer 4

我最近在g4u的回答作品中发布的小提琴，小提琴并不起作用。 FIDDLE被破坏了！在记事本中试一试并运行它。

更改标题颜色的错误

4 个答案: