javascript 获取节点元素的封装
2024-08-26 10:26:41
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div {
width: 100px;
height: 100px;
background-color: tomato;
margin: 10px;
}
</style>
</head>
<body>
<div></div>
<div class="box"></div>
<div id="box"></div>
<div class="box"></div>
<div></div> <script>
//简单版
// getEle("#box").style.backgroundColor = "lemonchiffon"; // var claArr = getEle(".box");
// for (var i = 0; i < claArr.length; i++) {
// claArr[i].style.backgroundColor = "yellow";
// }
// var divArr = getEle("div");
// for (var i = 0; i < divArr.length; i++) {
// divArr[i].style.border = "2px solid #ddd";
// } // //封装一个方法,然后判断第一个字符,如果是#用id,如果是.用className,否则用tagName
// 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);
// }
// } //最终版
$("#box").style.backgroundColor = "lemonchiffon";
var claArr = $(".box");
for (var i = 0; i < claArr.length; i++) {
claArr[i].style.backgroundColor = "gold";
}
var divArr = $("div");
for (var i = 0; i < divArr.length; i++) {
divArr[i].style.border = "2px solid #ccc";
}
function $(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);
}
}
</script>
</body>
</html>
最新文章
- [No0000A5]批处理常用命令大全
- css中单位px、pt、em和rem的区别
- 技术专题-PHP代码审计
- 关于comparable与comparator的用法(即自定义集合框架用法 )
- android 学习随笔五(界面)
- c#省市联动
- C# 委托总结
- aggregation(2):adaptive Boosting (AdaBoost)
- CPU相关信息
- JQUERY1.9学习笔记 之基本过滤器(五) 大于选择器
- Linux常见命令整理(一)
- 【Scala】Scala之String
- 小程序开发之图片转Base64(C#、.et)
- hadoop启动 datanode的live node为0
- python is和==的区别
- Visual Studio 2017 常用快捷键
- Null hypothesis TypeⅠerror Type Ⅱ error
- WEB 报表导入导出操作
- Kafka:ZK+Kafka+Spark Streaming集群环境搭建(十二)VMW安装四台CentOS,并实现本机与它们能交互,虚拟机内部实现可以上网。
- 【附3】springboot源码解析 - 构建SpringApplication