控制类名如何让按钮循环效果？

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

控制类名如何让按钮循环效果？

现在点击按钮，可以添加.two样式？如果想再点击一次按钮，恢复.one样式。循环往复，不知道该添加什么语句？？

<style>

body{ font-size:16px;}

.one{

border:1px solid #eee;

width:230px;

height:50px;

background:#ccc;

color:red; }

.two{

border:1px solid #ccc;

width:230px;

height:50px;

background:#9CF;

color:blue;}

</style>

</head>

<body>

<p id="p2" class="one">JavaScript使网页显示动态效果并实现与用户交互功能。</p>

function modify(){

var p2 = document.getElementById("p2");

p2.className="two"; }

</script>

提问者：炙宠啸逗逗 2014-11-18 22:15

个回答

Cbove

2014-12-12 10:09:27

if("one"==p2.className)
{
p2.className="two";

}else{p2.className="one";}

0
墨迹玖久

2014-11-26 11:24:15

本人菜鸟，弱弱的写个想法function add(){
var p1 = document.getElementById("p1");
if(p1.className=="one"){
p1.className="two";
}else{
p1.className="one";
}
}

0

偌颜宁: 2014-11-19 10:17:43

你可以参考下，自己用其他的方式写写试试

<body>
    <p id="p2" class="one">JavaScript使网页显示动态效果并实现与用户交互功能。</p>
    <input type="button" value="更改外观" onclick="modify()"/>
    <input type="hidden" value="1" id="txt_hidden"/>
<script>       
    function modify(){
        var p2 = document.getElementById("p2");
        var txtHidden = document.getElementById("txt_hidden");
        if(txtHidden.value==1){
            p2.className="two"; 
            txtHidden.value =2;
        }else{
           p2.className="one"; 
            txtHidden.value =1; 
        }
    }
</script>