怎么设置多次点击按钮，样式可以来回切换，同时document.write描述样式的文字也能变化？我这个代码哪里有问题？-慕课网

怎么设置多次点击按钮，样式可以来回切换，同时document.write描述样式的文字也能变化？我这个代码哪里有问题？

来源：3-6 控制类名（className 属性）

风起临冬

2018-07-26 14:01

<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<title>654613</title>
<style type="text/css">
.one{
    color:red;
    background-color:green;
    font-size:20px;
    width=300px;
    height=100px;
      }

.two{
    color:blue;
    background-color:pink;
    font-size:50px;
    width=500px;
    height=150px;
      }
</style>

<body>
    <div id="div1" style="text-align:center;">
    <p>样式可以转换，快来试试</p><br />
    <input name="button" type="button" onclick="typeform()" value="点我转换" />
    </div>
    
    <script>
        var mm=document.getElementById("div1");
        mm.className="one"
        document.write("现在的样式ID是："+mm.className)
    function typeform()
    {
        if(mm.className="one")
        {
            mm.className="two"
        }
        else
        {
            mm.className="one"
        }
    }
    </script>
</body>
</html>

只能点一次，再点就没反应了。当我的div样式是two时，应该触发else了呀？同时document.write的文字也不能改变（一直是one），难道不应该随着className变化吗。

写回答关注

4回答

大_大

2018-07-26 15:11:00

已采纳

if 括号里边应该用比较运算符== 你用的是赋值运算符 mm.className永远都是one
至于为当前样式是one 是因为函数中没有返回值（怎么设置暂时还没学到）

0 1
红河卡卡

2018-08-28 15:23:42

function typeform()
{
if(mm.className!="one")
{
mm.className="one"
}
else
{
mm.className="two"
}
}
改成这样

0 1
AKhui

2018-08-13 16:47:00

使用三目运算符 ?:
含义：如果p2当前的类名=’two',那么就设置为‘one’,如果不是等于‘two',就设置为’two'
function modify(){
var p2 = document.getElementById("p2");
p2.className=p2.className==='two'?'one':'two';
}

0 1
范范范0727

2018-08-06 15:17:59

因为输出样式那条语句只在页面加载时执行了一次，鼠标点击改变样式后，并没有输出样式，具体看你代码里的函数。

0 0