【写一个自己的js库】 5.添加修改样式的方法

时间：2015-08-31 22:57:08 阅读：168 评论：0 收藏：0 [点我收藏+]

标签：

1.根据id或class或tag修改样式，样式名是-连接格式的。

function setStyleById(elem, styles){
        if(!(elem = $(elem)) return false;

        for(prop in styles){
            if(!styles.hasOwnProperty(prop)) continue;

            if(elem.style.setProperty){
                elem.style.setProperty(prop, styles[prop]);
            }else{
                elem.style[camelize(prop)] = styles[prop];
            }
        }
        return true;
    }
    Lily[‘setStyleById‘] = setStyleById;

    function setStyleByClass(parent, tag, className, styles){
        var elements = getElementsByClassName(className, tag, parent);
        for(var i = 0; i < elements.length; i++){
            setStyleById(elements[i], styles);
        }
        return true;
    }
    Lily[‘setStyleByClass‘] = setStyleByClass;

    function setStyleByTag(tag, styles, parent){
        parent = $(parent) || document;
        var elements = parent.getElementsByTagName(tag);

        for(var i = 0; i < elements.length; i++){
            setStyleById(elements[i], styles);
        }
        return true;
    }
    Lily[‘setStyleByTag‘] = setStyleByTag;

2.获取class数组

function getClassNames(elem){
        if(!(elem = $(elem))) return false;
        return elem.className.split(/\s+/);
    }
    Lily[‘getClassNames‘] = getClassNames;

3.判断是否有class

function hasClassName(elem, className){
        if(!(elem = $(elem))) return false;
        var classNames = getClassNames(elem);

        for (var i = 0; i < classNames.length; i++) {
            if(classNames[i] === className) return true;
        }

        return false;
    }
    Lily[‘hasClassName‘] = hasClassName;

4.添加一个class

function addClass(elem, className){
        if(!(elem = $(elem))) return false;
        elem.className += (elem.className? ‘ ‘ : ‘‘) + className;
        return true;
    }
    Lily[‘addClass‘] = addClass;

5.删除一个class

function removeClassName(elem, className){
        if(!(elem = $(elem))) return false;
        var classNames =  getClassNames(elem);
        var length = classNames.length;

        for (var i = length - 1; i >= 0; i--) {
            if(classNames[i] === className) delete classNames[i];
        };

        elem.className = classNames.join(‘ ‘);
        return (length == classNames.length) ? false : true;
    }
    Lily[‘removeClassName‘] = removeClassName;

6.取得一个元素的计算样式

function getComputedStyle(elem, property){
        if(!(elem = $(elem)) || !property) return false;
        var value = elem.style[camelize(property)];

        if(!value){
            if(document.defaultView && document.defaultView.getComputedStyle){
                var css = document.defaultView.getComputedStyle(elem, null);
                value = css ? css.getPropertyValue(property) : null;
            }else if(elem.currentStyle){
                value = elem.currentStyle[camelize(property)];
            }
        }

        return value == "auto" ? ‘‘ : value;
    }
    Lily[‘getComputedStyle‘] = getComputedStyle;

7.渐变动画

function fadeColor(from, to, callback, duration, framesPerSecond){
	function doTimeout(color, frame){
		setTimeout(function (){
			callback(color);
		}, (duration * 1000 / framesPerSecond) * frame);
	}

	duration = duration || 1;
	framesPerSecond = framesPerSecond || 15 * duration;

	var frame = 1;
	var r, g, b;

	doTimeout(‘rgb(‘ + from.r + ‘,‘ + from.g + ‘,‘ + from.b + ‘)‘, 0);

	while(frame < framesPerSecond + 1){
		r = Math.ceil(from.r * (framesPerSecond - frame)/framesPerSecond + to.r * frame/framesPerSecond);
		g = Math.ceil(from.g * (framesPerSecond - frame)/framesPerSecond + to.g * frame/framesPerSecond);
		b = Math.ceil(from.b * (framesPerSecond - frame)/framesPerSecond + to.b * frame/framesPerSecond);

		doTimeout(‘rgb(‘ + r + ‘,‘ + g + ‘,‘ + b + ‘)‘, frame++);
	}
}

例子

Lily.addEvent(window, "load", function (){
            fadeColor({‘r‘: 255, ‘g‘: 255, ‘b‘: 255}, {‘r‘: 0, ‘g‘: 0, ‘b‘: 0}, function (color){
                document.body.style.backgroundColor = color;
            }, 10, 50);
        });

【写一个自己的js库】 5.添加修改样式的方法

标签：

原文地址：http://www.cnblogs.com/pandabunny/p/4774096.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行