DOM基础2之设置类名及封装

来源：互联网发布：香港保险知乎编辑：程序博客网时间：2024/06/08 07:26

设置类名
案例：点击按钮显示盒子给盒子添加类名

<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);
}；

0 0