设置类名 案例：点击按钮显示盒子
<head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> <title>Document</title> <style> .cls{ width: 200px; height: 200px; background-color: red; } </style> </head> <body> <input type="button" value="按钮" id="btn" /> <div id="box"></div> <script> //点击按钮显示盒子 var btn=document.getElementById('btn');//先获取按钮事件源 btn.onclick=function () {//给btn添加注册事件 // 给盒子添加类名（显示盒子） // 获取盒子 var box=document.getElementById('box'); //console.log(box);以标签形式输出的。 //console.dir(box);//此处是以对象的形式输出，中有一个classname就是类名。 //之所以不以class作为类名是由于class在js中是保留字，不符合命名规范。 box.className="cls";//给盒子添加类名的形式来触发事件，控制类名 } </script> </body>点击按钮实现盒子显示隐藏切换功能
<head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> <title>Document</title> <style> #box{ width: 200px; height: 200px; background-color: red; } .show{ display: block;/* 盒子显示 */ } .hide{ display: none;/* 盒子隐藏 */ } </style> </head> <body> 效果：点击按钮实现盒子的显示隐藏切换（切换类名即可）<br /> <input type="button" value="隐藏" id="btn" /> <div id="box"></div> <script> //点击按钮 隐藏盒子 var btn=document.getElementById('btn');//先获取按钮事件源 var box=document.getElementById('box');//要隐藏盒子先获取盒子 btn.onclick=function () {//给btn添加注册事件 //box.className="hide"; //btn.value="显示";//控制btn的value属性 //此处可以做判断：如果按钮的文字是显示，就让盒子显示。如果按钮的文字是隐藏，就让盒子隐藏。 if (btn.value==="隐藏") { box.className="hide"; btn.value="显示"; }else{ box.className="show"; btn.value="隐藏"; }; } </script> </body>显示隐藏二维码案例： ①需求：鼠标经过父盒子 让二维码显示
<head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> <title>Document</title> <style> #box{ width: 50px; height: 50px; display: block; } .nodeSmall{ width: 50px; height: 50px; background: url(images/bgs.jpg) no-repeat ; position: fixed; right: 10px; top: 40%; } .nodeSmall a{ display: block; width: 50px; height: 50px; } .erweima{ position: absolute; top: 0; left: -150px; } div{ display: block; } .show{ display: block;/* 盒子显示 */ } .hide{ display: none;/* 盒子隐藏 */ } </style> </head> <body> 显示隐藏二维码<br /> <div class="nodeSmall" id="node_small"> <a href="#"></a> <div class="erweima " id="er"><img src="images/456.jpg" alt="" /></div> </div> <script> /*需求：鼠标经过父盒子 让二维码显示 鼠标离开父盒子 让二维码隐藏*/ var node=document.getElementById('node_small');//先获取父盒子 //鼠标经过onmouseover node.onmouseover=function () {//绑定事件 er.className="show"; }; //鼠标离开onmouseout node.onmouseout=function () { er.className="hide"; }; </script>以上案例实现了需求，但显示的二维码的位置不符合要求。 以下方式替换类名： 类名本质是一个字符串，替换类名用到的是字符串内置的方法： str.replace（“要替换的参数”，“要替换成的参数”）；不会影响原来的字符串，还需要用原来的str重新接收来实现替换。
<script> //鼠标离开父盒子 让二维码隐藏 var node=document.getElementById('node_small'); node.onmouseover=function () { //er.className="show"; er.className=er.className.replace("hide","show");//获取类名 调用replace，并重新赋值。 }; node.onmouseout=function () { //er.className="hide"; er.className=er.className.replace("show","hide");//获取类名 调用replace，并重新赋值。 }; </script>方法封装：
<script> var node=document.getElementById('node_small'); node.onmouseover=function () { //er.className=er.className.replace("hide","show"); replaceClassName(er,"hide","show"); }; node.onmouseout=function () { //er.className=er.className.replace("show","hide"); replaceClassName(er,"show","hide"); }; //函数功能可以对任意对象的类名进行替换 function replaceClassName(ele,oldStr,newStr){ //要对任意对象的类名进行获取，把对象当做类名传到函数中ele参数。 //传进来那个对象，就对该对象替换。替换元素 //找到任意的字符串ele，把旧的字符串oldStr替换成新的newStr。 ele.className= ele.className.replace(oldStr,newStr); } //replace方法封装有一个缺点，就是在寻找字符串类名时，从前往后匹配时找到相同字符后就停止，并且直接替换。但是一般不会出问题。后续在学习字符串的内置方法时再完善。 </script>replace方法封装函数： 用replaceClassName(er,”hide”,”show”);调用函数。 function replaceClassName(ele,oldStr,newStr){ ele.className= ele.className.replace(oldStr,newStr); }；
