• 首页
  • ASPCMS
  • DEDECMS
  • DuxCms
  • 工具下载
  • SEO知识
  • WEB前端开发
  • 当前位置:首页 > WEB前端开发 > 特效代码 >
  • 特效代码
  • 探秘JavaScript框架-2.2样式操作

  • 已有 人阅读此文  -  2015.04.11  -  特效代码  -  萤火星

跨浏览器事件绑定

新增样式

JFAST.register("dom.addClass",
function(a) {
    return function(element, className) {
        element = $E(element);
        var classArray = className.split(/\s+/),
        result = typeof element.className == 'undefined' ? '': element.className,
        classMatch = " " + result + " ",
        i = 0,
        l = classArray.length;

        for (; i < l; i++) {
            if (classMatch.indexOf(" " + classArray[i] + " ") < 0) {
                result += (result ? ' ': '') + classArray[i];
            }
        }

        element.className = result;
        return element;
    }
});

修改样式

JFAST.register("dom.removeClass",
function(a) {
    return function(element, className) {
        element = $E(element);

        var oldClasses = element.className.split(/\s+/),
        newClasses = className.split(/\s+/),
        lenOld,
        lenDel = newClasses.length,
        j,
        i = 0;

        for (; i < lenDel; ++i) {
            for (j = 0, lenOld = oldClasses.length; j < lenOld; ++j) {
                if (oldClasses[j] == newClasses[i]) {
                    oldClasses.splice(j, 1);
                    break;
                }
            }
        }
        element.className = oldClasses.join(' ');
        return element;
    }
});

判断样式是否存在

JFAST.register("dom.hasClass",
function(a) {
    return function(element, className) {
        element = $E(element);

        // 对于 textNode 节点来说没有 className
        if (!element || !element.className) return false;

        var classArray = a.string.trim(className).split(/\s+/),
        len = classArray.length;

        className = element.className.split(/\s+/).join(" ");

        while (len--) {
            if (! (new RegExp("(^| )" + classArray[len] + "( |\x24)")).test(className)) {
                return false;
            }
        }
        return true;
    }
});

返回探秘JavaScript框架目录页


如果本篇文章帮到了你,那么,请点击右侧的百度分享,让我们一起帮助更多的朋友!
  • 上一篇:探秘JavaScript框架-2.1DOM对象获取及创建
  • 下一篇:探秘JavaScript框架-2.3文档操作和控制
前端交流群
热门文章
  • 1探秘JavaScript框架
  • 2CSS3 Transition
  • 3探秘JavaScript框架-1.1创建JF对象
  • 4探秘JavaScript框架-2.2样式操作
  • 5WEB前端页面常用CSS简写优化技
推荐阅读
  • CSS3 Transition
ASPCMS | DEDECMS | DuxCms | 工具下载 | SEO知识 | WEB前端开发 | 百度地图
萤火星的经验分享!友情赞助!
鲁ICP备15006695号-1