获取节点元素的方法(封装)

55 篇文章 0 订阅

获取节点元素(封装)

效果如下图:获取节点元素
css部分

	div {
		width: 100px;
		height: 100px;
		margin: 5px;
		background-color: pink;
		cursor: pointer;
	}

body部分

<div></div>
<div class="box"></div>
<div id="box"></div>
<div class="box"></div>
<div></div>
<script>
//封装函数
	function getEle(str){
		var str1 = str.charAt(0);
		if(str1 === "#"){
			return document.getElementById(str.slice(1));
		}else if(str1 === "."){
			return document.getElementsByClassName(str.slice(1));
		}else{
			return document.getElementsByTagName(str);
		}
	}
//调用一下看看
//1.给ID绑定
var idBox = getEle("#box");
idBox.onclick = function(){
	this.style.backgroundColor = "blue";
}
//2.给class绑定
var classArr = getEle(".box");
for(var i=0; i<classArr.length; i++){
	classArr[i].onclick = function(){
		this.style.backgroundColor= "green";
	}
}
//3.给标签绑定
var tagArr = getEle("div");
for(var i=0; i<tagArr.length; i++){
	tagArr[i].style.border = "1px solid #999";
}
</script>

如果把 getEle("#box") 函数换成 $("#box") ,这个好像看到了jquery,哈哈哈

  • 2
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值