web前端javascript笔记——（16）类

最新推荐文章于 2024-09-17 16:06:02 发布

Komorebi_9999

最新推荐文章于 2024-09-17 16:06:02 发布

阅读量378

点赞数 6

文章标签：前端 javascript 笔记

本文链接：https://blog.csdn.net/JLY19970726/article/details/135855127

版权

类的操作


<!DOCTYPE html>

<head>
    <meta charset="UTF-8">
    <title>

    </title>
    <style>
       .b1{
       	width:100px;
       	height:100px;
       	background-color: red;
       }
       .b2{
       	width:200px;
       	height:200px;
       	background-color:yellow;
       }
    </style>
    <script type="text/javascript">
        window.onload = function() {
        	//获取box
        	var box=document.getElementById("box");
          //获取btn01
          var btn01=document.getElementById("btn01");
          //为btn01绑定单击响应函数
          btn01.onclick=function(){
          	//修改box的样式
          	/*通过style属性来修改元素的样式，每修改一个样式，浏览器就需要重新渲染一次页面
          	 这样的执行性能是比较差的，而且这种形式当我们要修改多个样式时，也不太方便
          	 */
      /*    	box.style.width="200px";
          	box.style.height="200px";
          	box.style.backgroundColor="cornflowerblue";
          	*/
          	/*希望一行代码，可以同时修改多个样式*/
          	//修改box的class属性
          	/*我们可以通过修改元素的class属性来间接的修改样式
          	 这样以来，我们只需要修改一次，即可同时修改多个样式
          	 浏览器只需要重新渲染页面一次，性能比较好
          	 并且这种方法，可以使表现和行为进一步的分离*/
          //	box.className="b2";//修改为b2
          //将b1和b2结合起来
     //     box.className+=" b2";    //需要写一个空格
        //    addClass(box,"b2");  //b2需要加""
          // removeClass(box,"b2");
          toggleClass(box,"b2");
          };
            
          //定义一个函数，用来向一个元素中添加指定的class属性值
          /*参数：
           obj  要添加class属性的元素
           cn   要添加的class值*/
          function addClass(obj,cn){
          	//检查obj中是否含有cn
          	if(!hasClass(obj,cn)){
          		obj.className += " "+cn;    //必须要写空格
          	}
          	
          }
          /*判断一个元素中是否含有指定的class属性值
           * 如果有该class,则返回true，否则返回false
           	参数：*/
            function hasClass(obj,cn){
            	//判断obj中有没有cn  class
            	//创建一个正则表达式
         //   	var reg=/\bb2\b/;    //\b为单词边界
              var reg=new RegExp("\\b"+cn+"\\b");
              return reg.test(obj.className);
              
            }
            /*删除一个元素中的指定的class属性*/
           function removeClass(obj,cn){
           	//创建一个正则表达式
           	var reg=new RegExp("\\b"+cn+"\\b");
           	//删除class
           	obj.className=obj.className.replace(reg,"");
           }
           /*toggleClass可以用来切换一个类
                            如果元素中具有该类，则删除
                            如果元素中没有该类，则添加*/
                           function toggleClass(obj,cn){
                           	//判断obj中是否含有cn
                           	if(hasClass(obj,cn)){
                           		//有，删除
                           		removeClass(obj,cn);
                           	}else{
                           		//没有，添加
                           		addClass(obj,cn);
                           	}
                           };
        };
    </script>

</head>

<body>
    <button id="btn01">点击按钮之后修改box的样式</button>
    <div id="box" class="b1"></div>
</body>

</html>