【实践】用js 实现 jq 的removeClass 方法
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 方法的更多相关文章
- 怎么用js实现jq的removeClass方法
1.addClass:为指定的dom元素添加样式. 2.removeClass:删除指定dom元素的样式. 3.toggleClass:如果存在(不存在),就删除(添加)一个样式. 4.hasClas ...
- 【实践】js封装 jq siblings 方法
思路: 1.获取调用元素的父元素下的所有子元素(即它的所有同辈元素和调用元素本身) 2.遍历调用元素父元素下的所有子元素 除调用元素外的所有元素保存在一个数组里面 代码如下: <!DOCTYPE ...
- js和jq使用submit方法无法提交表单
昨天,在做一个表单异步提交内容的时候,遇到很奇怪的问题,submit()方法无法进行提交,每次提交都是把 当前给刷新了,网络抓包发现,每次都是 get方式去获取 当前页面,完全没有post 请求,想着 ...
- HTML，CSS，JS，JQ
CSS: <style> <!--属性选择器--> .container input[type="text"][name="txt"]{ ...
- 用JS和JQ来获取子节点！
用JS和JQ来获取子节点! 在JS中,如果通过document.getElementsByTagName来获取子元素有个弊端:它不单会获取符合要求的子元素,就连同孙元素也会获取.如果有特殊要求,那 ...
- JQ的ready()方法与window.onload()的区别与联系
JQ的ready()与window.onload()方法都是在文档加载完毕之后才会被触发的方法,但它们之间的区别也是很明显的. 1.区别与联系: $(document).ready() windo ...
- jQuery 属性操作 - addClass() 和 removeClass() 方法
实例 向第一个 p 元素添加一个类: $("button").click(function(){ $("p:first").addClass("int ...
- JS与JQ绑定事件的几种方式.
JS与JQ绑定事件的几种方式 JS绑定事件的三种方式 直接在DOM中进行绑定 <button onclick="alert('success')" type="bu ...
- JS、JQ相关小技巧积攒
JS.JQ相关小技巧积攒,以备不时之需. 1.js 获取时间差:时间戳相减.new Date().getTime() 获得毫秒数,除以(1000*60*60*24) 获得天数. 2.重定向操作:页面 ...
随机推荐
- 07@Pattern_Note_LabVIEW工厂模式理解
前言 折腾了一天,基本上搞清楚了简单工厂.工厂模式 理解 无论是简单工厂还是工厂模式,都有一个特点,即工厂加工的方式是不变的,产品的类型可以不断扩展:如果加工方式也会变化,修改工厂模式的加工方式会导致 ...
- Django 基本命令
1. 新建一个 django project django-admin.py startproject project-name 一个 project 为一个项目,project-name 项目名称, ...
- Linux中syntax error near unexpected token 错误提示解决方法
Linux中syntax error near unexpected token ... 错误提示有一般有两种原因: 1)window和Linux下换行符不一致导致 window下的换行和Linux下 ...
- Myeclipse java程序中运行图片无法加载并且乱码
Windows---prefrence--workspace--text file encoding亲测有效
- JS脚本收藏（一些实用的函数）
一.共享onload事件 这个函数的名字是addLoadEvent,它是由Simon Willison 编写的.它只有一个参数:打算在页面加载完毕时执行的函数的名字. 下面是addLoadEvent函 ...
- bahuanghou111
#include<stdio.h> int map[8][8]={0}; int count=0; int safe(int x,int y) { int i; int j; for(i= ...
- Spring的IOC原理(转载)
在网上看到一篇文章,感觉写得挺不错的,转载一下,本文转载自:http://www.cnblogs.com/xdp-gacl/p/3707631.html 一. IoC理论的背景 我们都知道,在采用面向 ...
- selenium使用过程中遇到的“element not visiable”错误
PS:本博客selenium分类不会记载selenium打开浏览器,定位元素,操作页面元素,切换到iframe,处理alter.confirm和prompt对话框这些在网上随处可见的信息:本博客此分类 ...
- 代码阅读分析工具Understand 2.0试用
Understand 2.0是一款源代码阅读分析软件,功能强大.试用过一段时间后,感觉相当不错,确实可以大大提高代码阅读效率.由于Understand功能十分强大,本文不可能详尽地介绍它的所有功能,所 ...
- extjs 4.2 高度自适应
问题描述: gridPanel放在tabpanel页中,而且这个tabpanel页是通过add方法添加的,页面整体布局是:首先一个viewPort布局,left区域是一个treePanel,通过点击t ...