JavaScript实现Class增删获取判断操作!

最新推荐文章于 2024-08-15 12:01:56 发布

原创最新推荐文章于 2024-08-15 12:01:56 发布 · 432 阅读

0 ·

CC 4.0 BY-SA版权

JavaScript 专栏收录该内容

3 篇文章

订阅专栏

本文介绍了JavaScript中用于操作Class的三个实用函数：addClass用于添加Class，removeClass用于删除Class，isByClassName用于判断元素是否包含特定Class。这些函数通过处理元素的className属性，实现了对Class的增删查操作。

// JavaScript Document

/*
	@添加Class
	@添加对象 obj;
	@添加类名 className;
*/
function addClass(obj,className)
{		
	
	var oClass = obj.className.split(' ');

	if(oClass.length == 0)
	{
		obj.className=className;return;
	};
	
	for(var i=0;i<oClass.length;i++)
	{	
		 if(oClass[i] == className)
		 {
			 return; 
		 };	
	};
	
	obj.className = obj.className+' '+className;
};

/*
	@删除类名
	@移除对象 obj;
	@元素类名 className;
*/

function removeClass(obj,className)
{
	var oClass = obj.className.split(' ');
	if(oClass.length == 0)return;
	
	for(var i=0;i<oClass.length;i++)
	{
		if(oClass[i] == className)
		{
			oClass.splice(i,1);
			obj.className = oClass.join(' ');
			return;
		};	
	};
};

/*
	@根据类名获取元素
	@元素类型 obj;
	@元素类名 className;
*/
function getByClaas(className,obj)
{
	var oClass = obj || document;
	var Element = oClass.getElementsByTagName("*");
	var arr = [];
	for(var i=0;i<Element.length;i++)
	{
		var els = Element[i].className.split(' ');
		for(var n=0;n<els.length;n++)
		{
			if(els[n] == className)
			{
				arr.push(Element[i]);
			};
		};
	};
	
	return arr;
};
/*
	@判断obj是否有className类名;
	@元素类型 obj;
	@元素类名 className;
*/
function isByClassName(obj,className)
{
	var oClass = obj.className.split(' ');
	if(oClass.length == 0)return;
	
	for(var i=0;i<oClass.length;i++)
	{
		if(oClass[i] == className)
		{
			return true;
		};	
	};
	
	return false;
};