HTML 代码

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>js removeClass 应用</title>

    <style type="text/css">

     div{

         width: 100px;

         height: 100px;

         background-color: #000;

     }

     .test1{

         border:1px solid red;

     }

     .test2{

         border: 5px solid #ff0;

     }

     .test3{

         border: 8px solid #f00;

     }

     .test4{

         border: 10px solid #999;

     }

     .test5{

         border: 12px solid #ccc;

     }

    </style>

</head>

<body>

  <div class="test1 test2 test3 test4 test5"></div>

js代码

<script type="text/javascript">

  window.onload = function(){

    var div = document.getElementsByTagName('div')[0];

    removeClass(div,"test2");

      function removeClass(elem,classname){

             //首先进行初次判断目标元素是否存在类名

             //如果有开始执行具体操作

             //如果没有调用控制台报错

             if(elem.className != ""){

                 //先把目标元素的所有类名保存在数组中

                 //类名的存在是以空格隔开的 所以调用split()方法传入一个空格参数

                var allClassName = elem.className.split(" ");

                console.log("第一次赋值后class数量为：" + allClassName);

                var result;//完成操作后保存类名（在以后调用）

                var listClass;//保存修改过后的数组

                //1.首先遍历一次所有类名

                for (var i = 0; i < allClassName.length; i++) {

                    if(allClassName[i] == classname){

                        //如果在所有类名里面找到要删除的类名执行如下操作

                        //将对应的类名删除，调用splice方法，第一个参数是要删除元素的索引

                        //第二个参数是删除元素的个数

                        allClassName.splice(i,1);

                    }

                }

                //把 allClassName 数组赋值给 listClass 数组

                listClass = allClassName;

                //遍历listClass 数组

                for (var j = 0; j < listClass.length; j++) {

                    //把第一个数组元素赋值给 result时要直接赋值不然会出现undefined

                    //之后加上空格因为类名的存在形式就是用空格分隔的

                    if (j == 0) {

                        result = listClass[j];

                        result += " ";

                    }else{

                        //除第一个以外的元素就可以用 加法运算保存在result字符串里面

                        result += listClass[j];

                        result += " ";

                    }

                }

                console.log("处理后的listClass数量" + listClass);

                elem.className = result;//将目标元素的类名重新被 result 覆盖掉

             }else{

                 console.log("目标元素没有存在的类名")

             }

        }

  }

 </script>

【实践】用js 实现 jq 的removeClass 方法的更多相关文章

  1. 怎么用js实现jq的removeClass方法

    1.addClass:为指定的dom元素添加样式. 2.removeClass:删除指定dom元素的样式. 3.toggleClass:如果存在(不存在),就删除(添加)一个样式. 4.hasClas ...

  2. 【实践】js封装 jq siblings 方法

    思路: 1.获取调用元素的父元素下的所有子元素(即它的所有同辈元素和调用元素本身) 2.遍历调用元素父元素下的所有子元素 除调用元素外的所有元素保存在一个数组里面 代码如下: <!DOCTYPE ...

  3. js和jq使用submit方法无法提交表单

    昨天,在做一个表单异步提交内容的时候,遇到很奇怪的问题,submit()方法无法进行提交,每次提交都是把 当前给刷新了,网络抓包发现,每次都是 get方式去获取 当前页面,完全没有post 请求,想着 ...

  4. HTML，CSS，JS，JQ

    CSS: <style> <!--属性选择器--> .container input[type="text"][name="txt"]{ ...

  5. 用JS和JQ来获取子节点！

    用JS和JQ来获取子节点!   在JS中,如果通过document.getElementsByTagName来获取子元素有个弊端:它不单会获取符合要求的子元素,就连同孙元素也会获取.如果有特殊要求,那 ...

  6. JQ的ready()方法与window.onload()的区别与联系

    JQ的ready()与window.onload()方法都是在文档加载完毕之后才会被触发的方法,但它们之间的区别也是很明显的. 1.区别与联系:   $(document).ready() windo ...

  7. jQuery 属性操作 - addClass() 和 removeClass() 方法

    实例 向第一个 p 元素添加一个类: $("button").click(function(){ $("p:first").addClass("int ...

  8. JS与JQ绑定事件的几种方式.

    JS与JQ绑定事件的几种方式 JS绑定事件的三种方式 直接在DOM中进行绑定 <button onclick="alert('success')" type="bu ...

  9. JS、JQ相关小技巧积攒

    JS.JQ相关小技巧积攒,以备不时之需. 1.js 获取时间差:时间戳相减.new Date().getTime()  获得毫秒数,除以(1000*60*60*24) 获得天数. 2.重定向操作:页面 ...

随机推荐

  1. NGUI实现技能CD效果

    在NGUI中使用Sprite的遮罩效果可以很轻松的实现技能CD效果. 具体实现步骤: ①新建一个技能图标的Sprite 如图中的Skill001,再在该技能Sprite上添加一个Sprite做遮罩, ...

  2. 安卓中級教程（9）：pathbutton中的animation.java研究（2）

    src/geniuz/myPathbutton/composerLayout.java package geniuz.myPathbutton; import com.nineoldandroids. ...

  3. HTML表单

    表单的主要作用在于在网页上提供一个图形用户界面,以采集和提交用户输入的数据.使用输入控件:1.文本框<input type＝"text">:2.口令输入框input t ...

  4. UITextField-修改占位文字和光标的颜色,大小

    一.设置占位文字的颜色 方法一:利用富文本 /** 手机号输入框 */ @property (weak, nonatomic) IBOutlet UITextField *phoneTextField ...

  5. TiD大会学习心得之沟通交流

    沟通交流是敏捷成功的关键要素,据相关调查阻碍敏捷的主要原因都与人有关:例如缺乏领导支持.团队缺乏协作精神.公司文化与敏捷相冲突等等:同时沟通交流也是团队建设.教练自身成长的重要支柱.下面结合在< ...

  6. tp的极光推送demo

    原文地址:http://blog.csdn.net/zhihua_w/article/details/52197611 极光推送(JPush)是独立的第三方云推送平台,致力于为全球移动应用开发者提供专 ...

  7. java 基础三 下雪

    通过repaint()方法进行重画. import javax.swing.JFrame; import javax.swing.JPanel; import java.awt.Graphics; p ...

  8. [PCL]点云渐进形态学滤波

    PCL支持点云的形态学滤波,四种操作:侵蚀.膨胀.开(先侵蚀后膨胀).闭(先膨胀后侵蚀) 在#include <pcl/filters/morphological_filter.h>中定义 ...

  9. docker 服务升级

    使用docker大家一般都是微服务部署了.个人的经验是乖乖的用docker自己的注册发现机制. 创建一个overlay类型的network.把所有的微服务加入进去.就可以把service name当作 ...

  10. Web 服务器 low bandth DOS attack

    https://www.owasp.org/images/0/04/Roberto_Suggi_Liverani_OWASPNZDAY2010-Defending_against_applicatio ...