JS toggleClass

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>无标题文档</title>

</head>

<body>

<div id = "test" style = "width:250px;height:100px;">

sssssssssssss

</div>

<input type = "button" value = "toggleClassTest" onclick = "toggleClassTest();" />

</body>

</html>

<style type="text/css">

div.testClass{

}

</style>

<script type="text/javascript">

function hasClass(obj, cls) {

return obj.className.match(new RegExp(‘(\\s|^)‘ + cls + ‘(\\s|$)‘));

}

function addClass(obj, cls) {

if (!this.hasClass(obj, cls)) obj.className += " " + cls;

}

function removeClass(obj, cls) {

if (hasClass(obj, cls)) {

var reg = new RegExp(‘(\\s|^)‘ + cls + ‘(\\s|$)‘);

obj.className = obj.className.replace(reg, ‘ ‘);

}

}

function toggleClass(obj,cls){

if(hasClass(obj,cls)){

removeClass(obj, cls);

}else{

addClass(obj, cls);

}

}

function toggleClassTest(){

var obj = document. getElementById(‘test‘);

toggleClass(obj,"testClass");

}

</script>

</body>
</html>

时间: 2024-11-02 10:45:05

JS toggleClass的相关文章

js中toggle()及toggleClass()的使用详解

在javascript中toggle()为连续点击事件,当里面含有多个function(){}函数时,每次点击依次执行里面的function的函数,直至最后一个.随后每次点击都重复对这几个函数的轮番调用,toggle的语法如下 toggle(fn1,fn2,fn3·····fnN); 但当toggle(),不带参数时,与show()和hide()的作用一样,切换元素的可见状态,如果元素是可见的,则切换为隐藏状态;如果元素是隐藏的则切换为可见状态,此时括号内可添加()毫秒(如1000)等),slo

原生js实现增加(addclass),删除(removeclass),判断是否存在(hasclass),如果存在删除,如果不存在添加(toggleclass)和获取类名(getbyclass)的方法

<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>addclass,removeclass,hasclass,toggleclass,getbyclass</title> </head> <body> <div class="div1" id="b

原生JS实现addClass,removeClass,toggleClass

<style type="text/css"> div.testClass{ background-color:gray; } </style> <script type="text/javascript"> function hasClass(obj, cls) { return obj.className.match(new RegExp('(\\s|^)' + cls + '(\\s|$)')); } function ad

js实现css、addClass、removeClass和toggleClass

JQuery中获取CSS样式css(name):访问第一匹配元素的样式属性css(name,value):在所有匹配的元素中,设置一个样式属性的值css(properties):把一个“名/值对”对象设置为所有匹配元素的样式属性css(name,function(index,value)):在所有匹配的元素中,设置一个样式属性的值 Javascript中获取样式的值 function css(obj, attr, value) { switch (arguments.length) { case

原生JS写toggleclass方法

function hasClass(obj, cls) {                  return obj.className.match(new RegExp('(\\s|^)' + cls + '(\\s|$)'));              }                            function addClass(obj, cls) {                  if (!this.hasClass(obj, cls)) obj.className +

Bootstrap源码:dropdown.js

bootstrap的dropdown.js,封装了一个非常灵活易用的下拉组件,在各种下拉场景中稍加变换,都能实现目标效果,还能跟其他的组件良好地结合,比如前面的tab.js,搭配完成更强大的组件功能.这个组件除了js之外,html的结构和css的配合更是精妙,我从这个组件里面学到了不少有用的经验和技巧,下面是它的html结构: <div class="dropdown"> <a href="#" class="dropdown-toggl

Js编写的菜单树

只需要提供这种JSON格式就ok了 其他的都可以直接引用这个代码进去 var testMenu=[ { "name": "一级菜单", "submenu": [ { "name": "二级菜单", "url": "" }, { "name": "二级菜单", "url": "" } ] }

认识JQuery,JQuery的优势、语法、多库冲突、JS原生对象和JQuery对象之间相互转换和DOM操作,常用的方法

(一)认识JQuery  JQuery是一个JavaScript库,它通过封装原生的JavaScript函数得到一套定义好的方法    JQuery的主旨:以更少的代码,实现更多的功能 (二)JQuery的优势 1)可以像CSS一样访问和操作DOM 2)修改CSS控制页面外观 3)简化JS代码操作 4)事件代理更加容易 5)动画效果使用方便 6) Ajax技术更加完美 7)大量的基于Jquery的插件 8)可以自定义扩展功能插件 (三)JQuery的语法 格式:$(selector).actio

HTML、CSS和JS

一.html 1.web流程中的HTML HTML---->赤裸裸的人 CSS  ---->穿华丽的衣服 JS    ---->让人动起来 浏览器和server端之间的通信本质上是字符串;浏览器将字符串处理为可视化的东西; web框架的祖宗是socket: #!/usr/bin/env python # _*_ coding:utf-8 _*_ import socket def handle_request(client): buf = client.recv(1024) client