用className选择元素并封装成函数

最新推荐文章于 2020-08-02 22:28:35 发布

o0o0o0o0o0oo

最新推荐文章于 2020-08-02 22:28:35 发布

阅读量95

点赞数

本文链接：https://blog.csdn.net/o0o0o0o0o0oo/article/details/106652556

版权

javascript 专栏收录该内容

25 篇文章 0 订阅

订阅专栏

步骤：

选出所有元素
通过className条件筛选

eg：将 class=“box” 的元素的 background 改为 red

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<script>
window.onload=function ()
{
	var oUl=document.getElementById('ul1');
	var aLi=oUl.getElementsByTagName('li');
	
	for(var i=0;i<aLi.length;i++)
	{
		if(aLi[i].className=='box')
		{
			aLi[i].style.background='red';
		}
	}
};
</script>
</head>

<body>
<ul id="ul1">
	<li class="box"></li>
	<li class="box"></li>
	<li></li>
	<li></li>
	<li></li>
	<li class="box"></li>
	<li></li>
</ul>
</body>
</html>

封装成函数

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<script>
function getByClass(oParent, sClass)
{
	var aResult=[];//用数组存放结果
	var aEle=oParent.getElementsByTagName('*');
	
	for(var i=0;i<aEle.length;i++)
	{
		if(aEle[i].className==sClass)
		{
			aResult.push(aEle[i]);
		}
	}
	return aResult;
}

window.onload=function ()
{
	var oUl=document.getElementById('ul1');
	var aBox=getByClass(oUl, 'box');
	
	for(var i=0;i<aBox.length;i++)
	{
		aBox[i].style.background='red';
	}
};
</script>
</head>

<body>
<ul id="ul1">
	<li class="box"></li>
	<li class="box"></li>
	<li></li>
	<li></li>
	<li></li>
	<li class="box"></li>
	<li></li>
</ul>
</body>
</html>

o0o0o0o0o0oo

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
用className选择元素并封装成函数

步骤：选出所有元素通过className条件筛选eg：将 class=“box” 的元素的 background 改为 red<!DOCTYPE HTML><html><head><meta charset="utf-8"><title>无标题文档</title><script>window.onload=function (){ var oUl=document.getElementById('
复制链接

扫一扫

专栏目录