46dom.操作标签class

<head>
    <meta charset="UTF-8">
    <title>4.操作标签class</title>
    <style>
        .bg-color1{
            background-color: #54f5ff;
        }
        .bg-color2{
            background-color: firebrick;
        }
        .bg-color3{
            background-color: blue;
        }
        .color1{
            color: fuchsia;
        }
        .color2{
            color: indigo;
        }
        .font-family1{
            font-family: 宋体;
        }
        .font-family2{
            font-family: 微软雅黑;
        }
    </style>
</head>
<body>
        <div id="no1">
            <div>测试效果1</div>
            <div>测试效果2</div>
            <div>测试效果3</div>
        </div>
        <br>
        <div>
            <select id="choose">
                <option value="0" >效果1</option>
                <option value="1" >效果2</option>
                <option value="2" >效果3</option>
            </select>
            <div id="show">显示class</div>
        </div>
        <div id="btn">
            <input type="button" value="添加背景色">
            <input type="button" value="添加字体颜色">
            <input type="button" value="添加字体风格">

            <hr>
            <input type="button" value="追加背景色">
            <input type="button" value="显示class">
            <input type="button" value="更换class">
        </div>

</body>
        <script>
            /*------------------------------------替换class-----------------------------------------*/
            /*每两个字符串之间是空格*/
            document.getElementById("btn").getElementsByTagName("input")[5].onclick=function () {
                //拿到class
                var classname = document.getElementById("no1").getElementsByTagName("div")[0].className;
                //截取背景色
                var bgClass = classname.substring(classname.indexOf("bg"));
                //bgClass="bg-color3";
                document.getElementById("show").innerHTML=bgClass;
                //document.getElementById("show").innerHTML=classname;
            }




            /*------------------------------------追加class-----------------------------------------*/
            var mark;
            /*function changed(){
                //var mark;
                mark=this.value;
            }*/


            document.getElementById("choose").onclick=function () {
                mark=this.value;
            }
            document.getElementById("btn").getElementsByTagName("input")[3].onclick=function () {
                /*判断是否存在这个要添加的class*/
                var classname = document.getElementById("no1").getElementsByTagName("div")[mark].className;
                //if(classname.indexOf("font-family1") !=-1) return;
                var judge = checkClass(classname,"font-family1");
                if(judge) return;
                    document.getElementById("no1").getElementsByTagName("div")[mark].className += "font-family1";

            }
            document.getElementById("btn").getElementsByTagName("input")[4].onclick=function () {
                //document.getElementById("no1").getElementsByTagName("div")[mark].
                document.getElementById("show").innerHTML=mark;
            }
            //检查class中是否包含新的class
            function checkClass(oClass,nClass){
                if(oClass.indexOf(nClass) ==-1 ) return false
                if(oClass.indexOf(nClass) !=-1 ) return true
            }

            /*-------------------------------------添加class------------------------------------*/
            /*如果直接写=就会把原来的class清除*/
            document.getElementById("btn").getElementsByTagName("input")[0].onclick=function () {
                document.getElementById("no1").getElementsByTagName("div")[0].className="bg-color1";
            }
            document.getElementById("btn").getElementsByTagName("input")[1].onclick=function () {
                document.getElementById("no1").getElementsByTagName("div")[1].className="color1";
            }
            document.getElementById("btn").getElementsByTagName("input")[2].onclick=function () {
                document.getElementById("no1").getElementsByTagName("div")[2].className="font-family1";
            }
        </script>
posted on 2022-04-12 23:00 小小程序猿level1 阅读(28) 评论(0) 收藏举报