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

最新推荐文章于 2022-10-19 14:46:20 发布

JunXian9102

最新推荐文章于 2022-10-19 14:46:20 发布

阅读量544

点赞数

本文链接：https://blog.csdn.net/smiple9102/article/details/61196816

版权

js-dom基础课堂笔记专栏收录该内容

26 篇文章 0 订阅

订阅专栏

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

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