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相关推荐

  1. js 实现 hasClass(), addClass(), removeClass() 方法

    js 实现 hasClass(), addClass(), removeClass() 方法 HTML5-classList classList 方法有 contains('className') / ...

  2. 常用的js自定义方法 -- hasClass addClass removeClass getElementsByClass

    function hasClass(ele,cls) { var result = ele && ele.className && (ele.className.sea ...

  3. 原生JS实现hasClass,addClass,removeClass

    1.hasClass function hasClass(elem, cls){ cls = cls || ''; if(cls.replace(/\s/g, '').length == 0) ret ...

  4. 02属性操作_jqueryCSS类操作(addClass()、removeClass()、toggleClass())

    02属性操作_jqueryCSS类操作(addClass().removeClass().toggleClass()) 代码演示 <!DOCTYPE html> <html>& ...

  5. 原生js实现addClass,removeClass,hasClass方法

    第一部分:原生js实现addClass,removeClass,hasClass方法 function hasClass(elem, cls) {cls = cls || '';if (cls.rep ...

  6. java js获取css方法_5种JavaScript和CSS交互的方法

    原标题:5种JavaScript和CSS交互的方法 随着浏览器不断的升级改进,CSS和Java之间的界限越来越模糊.本来它们是负责着完全不同的功能,但最终,它们都属于网页前端技术,它们需要相互密切的合 ...

  7. 优雅的使用Js或CSS处理文本的截断与展示

    之前遇见一个问题,就是处理文本截断,然后可以手动切换文本是全展示和手动展示,因为这个问题比较常见,而且其实现方式有多种,于是决定总结一下,与读者分享. 前言 首先,我们看这样一个场景: 展开更多 其h ...

  8. 通过JS+DIV+CSS排版布局实现选项卡效果

    2019独角兽企业重金招聘Python工程师标准>>> CSS介绍及布局特定 层叠样式表是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文 ...

  9. 【实现js和css互通、共享常量参数值】js如何获取CSS/SCSS/LESS的常量、CSS/SCSS/LESS又是如何获取js的值(或者说js是如何主动推送参数给CSS使用的)?

    js获取CSS/SCSS/LESS的常量 <template><div id="body"><p>--color: {{ color }}< ...

最新文章

  1. eclipse设置保护色非原创
  2. 恢复 Microsoft SQL Server SA 密码的三种方法
  3. MATLAB修改工作环境
  4. Vue2.0---webpack打包知识点-2
  5. 预备作业02-20162314王译潇 黑客帝国之路1.1
  6. 【行业应用】一文讲通电力数字化转型
  7. C语言工程实践-简单文本编辑器
  8. Apache Web Server - httpd 的文档根目录 及 访问控制
  9. Python 进程与线程小随笔
  10. python计算机视觉2:图像边缘检测
  11. javascript权威指南(2)
  12. C#ADO.NET操作数据代码汇总
  13. 文本编辑器查看 cprintf颜色_做生信,你需要一款好用的文本编辑器
  14. 监控的1080P、3MP和5MP是什么意思?区别是什么?
  15. 2022国产WMS仓库管理系统排名
  16. python3实现灰度图的双三次插值算法缩放
  17. VueX 以及axios
  18. mysql的genelog_小白实战课堂!转录因子的候选靶基因查询~~
  19. 【苹果推】什么是苹果推?相册推软件网卡 MAC
  20. FFmpeg使用sws_scale转换像素格式后,视频变为绿色条纹背景及部分图像丢失

热门文章

  1. java第七章第九题_Java2程序设计基础第七章课后习题
  2. Dialog对话框全解
  3. 一句python,一句R︱python中的字符串操作、中文乱码、NaN情况(split、zip...)
  4. 图片从预处理到分类的过程
  5. [windows]mstsc远程报:这可能是由于CredSSP 加密Oracle修正的解决方法
  6. Linux系统下apt-get命令详解
  7. C++ 模板和 C# 泛型之间的区别(C# 编程指南)
  8. 阿里巴巴战略投资苏宁体育!
  9. 你知道云计算,但是你知道“云工作”吗?
  10. LSTM网络(Long Short-Term Memory )