zoukankan      html  css  js  c++  java
  • DOM处理

    DOM处理

    这几天整理了一下思路,本来觉得DOM部分会有很多东西,但是忽然发现频繁使用的其实并不太多

    class

    class处理部分主要有四个

    hasClass:检查元素是否包含某个class

    addClass:为元素添加一个class

    removeClass:为元素删除一个class

    toggleClass:切换元素的class, 如果只传入一个class,则切换这个class的有无;如果传入两个class,则元素删除当前class,替换为另一个

    复制代码
    hasClass : function(element, className) {
                var re = new RegExp("\b" + className + "\b", "i");
                if (element.className.match(re))
                    return true;
                return false;
            },
    
            addClass : function(element, className) {
                var re = new RegExp("\s*" + className, "gi");
                var eleClass = element.className;
                if (!eleClass.match(re))
                    element.className = eleClass + " " + className;
            },
    
            removeClass : function(element, className) {
                var re = new RegExp("\s*" + className, "gi");
                var eleClass = element.className;
                eleClass = eleClass.replace(re, "");
                if (element.className != eleClass)
                    element.className = eleClass;
            },
            
            toggleClass:function(element,class1,class2){
                if(class2!=undefined){
                    if(ssLib.hasClass(element,class1)){
                        ssLib.removeClass(element,class1);
                        ssLib.addClass(element,class2);
                    }else if(ssLib.hasClass(element,class2)){
                        ssLib.removeClass(element,class2);
                        ssLib.addClass(element,class1);
                    }
                }else{
                    if(ssLib.hasClass(element,class1)){
                        ssLib.removeClass(element,class1);
                    }else{
                        ssLib.addClass(element,class1);
                    }
                }
            },
    复制代码

    元素尺寸

    元素尺寸有两个方法

    getRect:获取元素尺寸,同时包含其上下左右四个边的位置

    getViewPortSize:获取可视窗口(ViewPort,不含滚动条)尺寸

    getScrollSize:获取元素(包含滚动条)尺寸

    复制代码
    getRect : function(element) {
                var rect = element.getBoundingClientRect();
                if (typeof rect.width == 'undefined') {
                    _rect = {
                        width : rect.right - rect.left,
                        height : rect.bottom - rect.top,
                        top : rect.top,
                        bottom : rect.bottom,
                        left : rect.left,
                        right : rect.right
                    };
                    return _rect;
                }
                return rect;
            },
    
            getViewPortSize : function() {
                if (document.compatMode == "CSS1Compat") {
                    return {
                        width : document.documentElement.clientWidth,
                        height : document.documentElement.clientHeight
                    };
                } else {
                    return {
                        width : document.body.clientWidth,
                        height : document.body.clientHeight
                    };
                }
            },
    
            getScrollSize : function(element) {
                var e = element
                        || (document.compatMode == "CSS1Compat" ? 
                                document.documentElement: document.body);
                return {
                   width : Math.max(element.scrollWidth, element.clientWidth),
                   height : Math.max(element.scrollHeight, element.clientHeight)
           };
            },
    复制代码

    元素位置

    getScrollPos:获取元素滚动条位置

    getViewPortPos:获取元素相对于可视窗口(ViewPort,不包括滚动条)的位置

    getAbsolutePos:获取元素相对于文档(包含滚动条)位置

    getOffsetPos:获取文档相对于父容器位置

    复制代码
    getScrollPos : function(element) {
                var e = element
                        || (document.compatMode == "CSS1Compat" ? document.documentElement
                                : document.body);
                return {
                    x : e.scrollTop,
                    y : e.scrollLeft
                };
            },
    
            getViewPortPos : function(element) {
                var rect = element.getBoundingClientRect();
                return {
                    x : rect.left,
                    y : rect.top
                };
            },
    
            getAbsolutePos : function(element) {
                var rect=element.getBoundingClientRect();
                var doc = document.compatMode == "CSS1Compat" ? document.documentElement
                        : document.body;
                return{
                    x:rect.left+Math.max(doc.scrollLet,doc.clientLeft),
                    y:rect.top+Math.max(doc.scrollTop,doc.clientTop)
                };
            },
            
            getOffsetPos:function(element){
                return{
                    x:element.offsetLeft,
                    y:elementoffsetTop
                };
            }
    复制代码

    元素属性/样式

    这个借鉴了一下jQuery的写法

    attr:获取/设置元素的属性值

    css:获取/设置元素的style

    这两个函数是临时想到的,还没想好怎么写,明天晚上补上吧

     
     
  • 相关阅读:
    xgqfrms™, xgqfrms® : xgqfrms's offical website of GitHub!
    xgqfrms™, xgqfrms® : xgqfrms's offical website of GitHub!
    mysql 借用临时加索引的方式,使原来几分钟以上才能查出来的数据,优化到2秒钟以内
    周一不睡觉,也要把pandas groupy 肝完,你该这么学,No.8
    A Survey on Ring Signature
    门罗币基础技术介绍
    oracle 全表扫描返回无序
    截图工具竟是个大合体,这个软件一定要了解!
    健康小知识:你对肺痨了解多少?
    支持4K30帧的海鸟4K潜水套装上手体验
  • 原文地址:https://www.cnblogs.com/Leo_wl/p/3309442.html
Copyright © 2011-2022 走看看