博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
实现toggleClass功能
阅读量:4324 次
发布时间:2019-06-06

本文共 1317 字,大约阅读时间需要 4 分钟。

1  2  3  4  5 
6
7
8 Document 9 14 15 16 17
18 sssssssssssss19
20 21 22 23 24 53 54

 

<!DOCTYPE html
>
<
html
lang=
"en"
>
<
head
>
<
meta
charset=
"UTF-8"
>
<
meta
name=
"viewport"
content=
"width=device-width, initial-scale=1.0"
>
<
meta
http-equiv=
"X-UA-Compatible"
content=
"ie=edge"
>
<
title
>Document
</
title
>
<
style
>
div.testClass {
background-color:
gray;
}
<
/
style
>
</
head
>
<
body
>
<
div
id=
"test"
style=
"width:250px;height:100px;"
>
sssssssssssss
</
div
>
<
input
type=
"button"
value=
"toggleClassTest"
onclick=
"toggleClassTest();"
/>
</
body
>
<
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
>
</
html
>

转载于:https://www.cnblogs.com/cisum/p/7987212.html

你可能感兴趣的文章
微软自己的官网介绍 SSL 参数相关
查看>>
Composite UI Application Block (CAB) 概念和术语
查看>>
64位MATLAB和C混合编程以及联合调试
查看>>
原生js大总结二
查看>>
PHP基础
查看>>
UVa 11488 超级前缀集合(Trie的应用)
查看>>
Django 翻译与 LANGUAGE_CODE
查看>>
[转]iOS教程:SQLite的创建数据库,表,插入查看数据
查看>>
【转载】OmniGraffle (一)从工具栏开始
查看>>
初识ionic
查看>>
java 中打印调用栈
查看>>
开发 笔记
查看>>
数据挖掘算法比赛 - 简单经验总结
查看>>
生成商户订单号/退款单号
查看>>
使用Android OpenGL ES 2.0绘图之六:响应触摸事件
查看>>
我们过去几年做对了哪些事
查看>>
ubuntu 16.04LTS
查看>>
javascript深入理解js闭包
查看>>
Oracle的安装
查看>>
Android Socket连接PC出错问题及解决
查看>>