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 2:
if (typeof arguments[1] == "object") { //批量设置属性
for (var i in attr) obj.style[i] = attr[i]
}
else { // 读取属性值
return obj.currentStyle ? obj.currentStyle[attr] : getComputedStyle(obj, null)[attr]
}
break;
case 3:
//设置属性
obj.style[attr] = value;
break;
default:
return "";
}
}
采用这种方式同样实现了 JQuery的效果。
---------------------------------------------------------------------------------------
JQuery中有addClass,removeClass,toggleClass
addClass(class):为每个匹配的元素添加指定的类名
removeClass(class):从所有匹配的元素中删除全部或者指定的类
toggleClass(class):如果存在(不存在)就删除(添加)一个类
---------------------------------------------------------------------------------------
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, ' ');
}
}
采用这种方式同样实现了 JQuery的效果。
转载于:https://www.cnblogs.com/kuikui/archive/2011/12/26/2302375.html
js实现css、addClass、removeClass和toggleClass相关推荐
- js 实现 hasClass(), addClass(), removeClass() 方法
js 实现 hasClass(), addClass(), removeClass() 方法 HTML5-classList classList 方法有 contains('className') / ...
- 常用的js自定义方法 -- hasClass addClass removeClass getElementsByClass
function hasClass(ele,cls) { var result = ele && ele.className && (ele.className.sea ...
- 原生JS实现hasClass,addClass,removeClass
1.hasClass function hasClass(elem, cls){ cls = cls || ''; if(cls.replace(/\s/g, '').length == 0) ret ...
- 02属性操作_jqueryCSS类操作(addClass()、removeClass()、toggleClass())
02属性操作_jqueryCSS类操作(addClass().removeClass().toggleClass()) 代码演示 <!DOCTYPE html> <html>& ...
- 原生js实现addClass,removeClass,hasClass方法
第一部分:原生js实现addClass,removeClass,hasClass方法 function hasClass(elem, cls) {cls = cls || '';if (cls.rep ...
- java js获取css方法_5种JavaScript和CSS交互的方法
原标题:5种JavaScript和CSS交互的方法 随着浏览器不断的升级改进,CSS和Java之间的界限越来越模糊.本来它们是负责着完全不同的功能,但最终,它们都属于网页前端技术,它们需要相互密切的合 ...
- 优雅的使用Js或CSS处理文本的截断与展示
之前遇见一个问题,就是处理文本截断,然后可以手动切换文本是全展示和手动展示,因为这个问题比较常见,而且其实现方式有多种,于是决定总结一下,与读者分享. 前言 首先,我们看这样一个场景: 展开更多 其h ...
- 通过JS+DIV+CSS排版布局实现选项卡效果
2019独角兽企业重金招聘Python工程师标准>>> CSS介绍及布局特定 层叠样式表是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文 ...
- 【实现js和css互通、共享常量参数值】js如何获取CSS/SCSS/LESS的常量、CSS/SCSS/LESS又是如何获取js的值(或者说js是如何主动推送参数给CSS使用的)?
js获取CSS/SCSS/LESS的常量 <template><div id="body"><p>--color: {{ color }}< ...
最新文章
- eclipse设置保护色非原创
- 恢复 Microsoft SQL Server SA 密码的三种方法
- MATLAB修改工作环境
- Vue2.0---webpack打包知识点-2
- 预备作业02-20162314王译潇 黑客帝国之路1.1
- 【行业应用】一文讲通电力数字化转型
- C语言工程实践-简单文本编辑器
- Apache Web Server - httpd 的文档根目录 及 访问控制
- Python 进程与线程小随笔
- python计算机视觉2:图像边缘检测
- javascript权威指南(2)
- C#ADO.NET操作数据代码汇总
- 文本编辑器查看 cprintf颜色_做生信,你需要一款好用的文本编辑器
- 监控的1080P、3MP和5MP是什么意思?区别是什么?
- 2022国产WMS仓库管理系统排名
- python3实现灰度图的双三次插值算法缩放
- VueX 以及axios
- mysql的genelog_小白实战课堂!转录因子的候选靶基因查询~~
- 【苹果推】什么是苹果推?相册推软件网卡 MAC
- FFmpeg使用sws_scale转换像素格式后,视频变为绿色条纹背景及部分图像丢失
热门文章
- java第七章第九题_Java2程序设计基础第七章课后习题
- Dialog对话框全解
- 一句python,一句R︱python中的字符串操作、中文乱码、NaN情况(split、zip...)
- 图片从预处理到分类的过程
- [windows]mstsc远程报:这可能是由于CredSSP 加密Oracle修正的解决方法
- Linux系统下apt-get命令详解
- C++ 模板和 C# 泛型之间的区别(C# 编程指南)
- 阿里巴巴战略投资苏宁体育!
- 你知道云计算,但是你知道“云工作”吗?
- LSTM网络(Long Short-Term Memory )