JavaScript - 使用纯 JavaScript 切换 CSS 颜色?

标签 javascript html css colors

我正在尝试使用纯 javascript 来回更改表单文本字段的颜色。有人可以帮忙吗?

我可以改变颜色一次,但不能再回来

这是我做的

<!DOCTYPE html>
<html>
    <head>
        <title>JavaScript</title>

    </head>

    <body>
        <script type="text/javascript">
            function color() {
                var x = document.getElementById("currID");
                if(x.style.color="red") {
                    x.style.color="blue";
                 }    
                }

            }
        </script>

        <input type="button" value="Click Me" id="testButton" onclick="color()" />

        <form method="get" action="getresult.php">

            <p>Current ID: <input id="currID" class="a" type="text" name="currID" /></p>
        <p><input type="submit" value="Request new ID"/></p>


        </form>

    </body>
</html>

CSS

<style type="text/css">
                .main {
                    color:black;
                }
                .a {
                    color:red;
                }
            </style>

最佳答案

试试这个:

    <!DOCTYPE html>
<html>
<head>
    <title>JavaScript</title>

</head>

<body>
    <script type="text/javascript">
           function color() {
            var x = document.getElementById("currID");
                if(x.className == "main"){
                    x.className = "a";
                } else {
                    x.className = "main";
                }
            }
    </script>

    <input type="button" value="Click Me" id="testButton" onclick="color()" />

    <form method="get" action="getresult.php">

        <p>Current ID: <input id="currID" class="a" type="text" name="currID" /></p>
    <p><input type="submit" value="Request new ID"/></p>


    </form>

</body>
</html>

CSS:

<style type="text/css">
.main {
    color:black;
}
.a {
    color:red;
}
</style>

演示:https://jsfiddle.net/a5rxoh03/

关于JavaScript - 使用纯 JavaScript 切换 CSS 颜色?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29715466/

相关文章:

javascript - 如何将提交文本框中的值连接到 url API 调用中?

javascript - 重新创建一个数组,其中名称与子字符串匹配且 channel 类型等于 Ota

javascript - jquery 向这个被点击的元素添加类

css - 样式化 p 标签,但不是当它们有 a 标签时

html - 如何避免将类应用于 Div 内的跨度?

javascript - 不能点击div

javascript - 我想用 js 永久更改 html

ios - 生成文件并将其附加到移动浏览器客户端的电子邮件中

HTML/CSS 无论文本大小相同

javascript - 如何使用 jquery 区分桌面浏览器尺寸 1024px 和平板电脑尺寸 1024px