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的效果。

js实现css、addClass、removeClass和toggleClass的更多相关文章

  1. 原生JavaScript实现的addclass,removeclass,hasclass,toggleclass,getbyclass

    <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...

  2. jQuery的addClass,removeClass和toggleClass方法

    jQuery的addClass,removeClass和toggleClass方法,最后一个方法在某一情形之下,可以替代前面2个方法. 第一个方法addClass为元素添加一个class. 第二个方法 ...

  3. 原生js 实现jquery addClass,removeClass

    代码如下: function hasClass(obj, cls) { let reg = new RegExp("(\\s|^)" + cls + "(\\s|$)&q ...

  4. JS实现hasClass addClass removeClass

    // 判断class有无 function hasClass(ele, cls) { if (ele) { cls = cls || '' if (cls.replace(/\s/g, '').len ...

  5. jQuery addClass removeClass toggleClass hasClass is(.class)用法

    jQuery addClass removeClass toggleClass hasClass is(.class)用法 <%@ page language="java" ...

  6. 【总结整理】js获取css的属性(内部,外部,内嵌(写在tag中))

    在JS中需要获取某个元素的宽高或者是绝对定位的位置信息,通常我们会这么写: var elemWidth = elem.style.width; console.log(elemWidth); //(空 ...

  7. 5种你未必知道的JS和CSS交互的方法

    随着浏览器不断的升级改进,CSS和JavaScript之间的界限越来越模糊.本来它们是负责着完全不同的功能,但最终,它们都属于网页前端技术,它们需要相互密切的合作.我们的网页中都有.js文件和.css ...

  8. js jquery css 选择器总结

    js jquery css 选择器总结 一.原始JS(Document 对象)选择器. id选择器:document.getElementById("test"); name选择器 ...

  9. 参考bootstrap中的popover.js的css画消息弹框

    前段时间小颖的大学同学给小颖发了一张截图,图片类似下面这张图: 小颖当时大概的给她说了下,其实小颖也不知道上面那个三角形怎么画嘻嘻,给她说了DOM结构,具体的css让她自己百度,今天小颖自己参考boo ...

随机推荐

  1. python写2048小游戏

    #!/usr/bin/env python # coding=utf-8 #******************************************************** # > ...

  2. 支付宝地铁SDK使用失败记录

    使用PHP版的SDK,没处理好,发现有个test/TestImage.php的测试文件,开始改,发现状态码$request -> getCode()一直为0,一路调试上去,发现是getConte ...

  3. PerformSelector

    PerformSelector 1. 执行和取消 //执行 [self performSelector:@selector(showMessage) withObject:nil afterDelay ...

  4. 级联两个bootstrap-table。一张表显示相关的数据,通过点击这张表的某一行,传过去对应的ID,刷新另外一张表。

    二张表的代码(我用的插件,大家可以去网上直接下载http://issues.wenzhixin.net.cn/bootstrap-table/): <div class="contai ...

  5. JDK1.8导致发送邮件失败

    问题:本地JDK1.6测试可以发送邮件,但是linux上jdk1.8发送邮件失败.报错: Sending the email to the following server failed : smtp ...

  6. windows下面配置apache+http

    一.apache安装 下载并安装apache_2.2.9-win32-x86-openssl-0.9.8h-r2.msi(见附件),找到apache安装目录(C:\Program Files (x86 ...

  7. 几种获取IP 根据IP获取地址的方法 JS,第三方 新浪 网易 腾讯

    第一种是利用纯真ip数据库,这个可以在网上找到很多,缺点是更新有点慢. 第二种是利用门户网站的接口 目前已知的有腾讯.新浪.网易.搜狐和Google提供IP地址查询API,但是找得到的只有腾讯.新浪和 ...

  8. Python程序的首行

    >问题 >>在一些python程序中的首行往往能够看见下面这两行语句中的一句 >>>#!/usr/bin/Python >>>#!/usr/bin ...

  9. 【转】Deadlock的一些总结(死锁分析及处理)

    1.1.1 摘要 在系统设计过程中,系统的稳定性.响应速度和读写速度至关重要,就像12306.cn那样,当然我们可以通过提高系统并发能力来提高系统性能总体性能,但在并发作用下也会出现一些问题,例如死锁 ...

  10. Android 自定义 view(四)—— onMeasure 方法理解

    前言: 前面我们已经学过<Android 自定义 view(三)-- onDraw 方法理解>,那么接下我们还需要继续去理解自定义view里面的onMeasure 方法 推荐文章: htt ...