js实现添加className

obj.className =' '; //设置为新的
obj.className +=' ';//在原来的后面加这个
obj.classList.add(" "); //与第一个等价

 

 

<style>
#side_btn {width: 15%;left: 0;bottom: 5%;}
#side_nav {width: 25%;left: -34%;top: 15%;transition: left 1s;text-align: center;}
.nav_float img{width:100%;vertical-align:top;}
.nav_float > div {position: fixed;z-index: 9999;}
#mask{width:100%;height:100%;background:rgba(0,0,0,.5);position:absolute;top:0;left:0;display:none;}
.navgation #side_btn{left:-34%;}
.navgation #side_nav{left:0;}
</style>
<section class="nav_float">
    <div id="side_btn">
        <img id="open_side" src="http://img62.ddimg.cn/upload_img/00628/imgapp/branchTo0906.png" />
    </div>
    <div id="side_nav">
        <div class="side_nav_nonelink"><img id="back_main" src="http://img62.ddimg.cn/upload_img/00628/imgapp/0906branch_01.png" /></div>
            <a href="cms://page_id=mix_20170906_sport"><img src="http://img60.ddimg.cn/upload_img/00628/imgapp/0906branch_02.png" /></a>            
            <a href="cms://page_id=mix_20170906_bag"><img src="http://img60.ddimg.cn/upload_img/00628/imgapp/0906branch_03.png" /></a>
            <a href="cms://page_id=mix_20170906_girls"><img src="http://img62.ddimg.cn/upload_img/00628/imgapp/0906branch_04.png" /></a>
            <a href="cms://page_id=mix_20170906_underwear"><img src="http://img60.ddimg.cn/upload_img/00628/imgapp/0906branch_05.png" /></a>
            <a href="cms://page_id=mix_20170906_men"><img src="http://img60.ddimg.cn/upload_img/00628/imgapp/0906branch_06.png" /></a>
            <a href="cms://page_id=mix_20170906_child"><img src="http://img60.ddimg.cn/upload_img/00628/imgapp/0906branch_07.png" /></a>
            <a href="cms://page_id=mix_20170906_shoes"><img src="http://img60.ddimg.cn/upload_img/00628/imgapp/0906branch_08.png" /></a>
            <a href="cms://page_id=mix_20170906_jewel"><img src="http://img62.ddimg.cn/upload_img/00628/imgapp/0906branch_09.png" /></a>
            <span><img src="http://img63.ddimg.cn/upload_img/00628/imgapp/0906branch_10.png"/></span>
        </div>
</section>
<section id="mask"></section>

<script type="text/javascript">
var oSlideBtn = document.getElementById("side_btn"),
    oSideNav = document.getElementById("side_nav"),
    oMask = document.getElementById("mask"),
    _left= oSideNav.style.left;

oSlideBtn.onclick = function(){
    this.parentNode.className+=" navgation";
    oMask.style.display="block";

}
oMask.onclick = function(){
     this.style.display="none";
     oSlideBtn.parentNode.className="nav_float";
}

</script>

转载于:https://www.cnblogs.com/water-wf/p/8514119.html