javascript 获取节点元素的封装
<!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>
javascript 获取节点元素的封装的更多相关文章
- JavaScript获取html元素的实际宽度和高度
一.JavaScript获取html元素宽高 1.宽高都写在样式表里,就比如#div1{width:120px;}.这中情况通过#div1.style.width拿不到宽度,而通过#div1.offs ...
- 用javaScript获取页面元素值
用JavaScript获取页面元素常见的三种方法: getElementById() ...
- javascript 获取iframe元素的方法
javascript 获取iframe元素的方法 第一种: $("#IframeID").contents().find("div"); 第二种: $(win ...
- 【转】JavaScript获取节点类型、节点名称和节点值
DOM节点信息包括节点类型(nodeType).节点名称(nodeName)和节点值(nodeValue). 节点类型 DOM节点中,每个节点都拥有不同的类型.W3C规范中常用的 DOM节点类型有以下 ...
- Javascript获取html元素的几种方法
1.通过id获取html元素 <!DOCTYPE html> <html> <head lang="en"> <meta charset= ...
- 用Javascript获取页面元素的位置
制作网页的过程中,你有时候需要知道某个元素在网页上的确切位置. 下面的教程总结了Javascript在网页定位方面的相关知识. 一.网页的大小和浏览器窗口的大小 首先,要明确两个基本概念. 一张网页的 ...
- JavaScript获取页面元素的常用方法
1.通过标签获取元素,返回一个数组 var li = document.getElementsByTagName('li');//标签获取元素 li[0].innerHTML;// 查看获取元素的内容 ...
- Javascript获取页面元素相对和绝对位置
制作网页的过程中,你有时候需要知道某个元素在网页上的确切位置. 下面的教程总结了Javascript在网页定位方面的相关知识. 一.网页的大小和浏览器窗口的大小 首先,要明确两个基本概念. 一张网页的 ...
- javascript相邻节点元素获取
<script> window.onload = function () { var myLinkItem = document.getElementById('linkItem'); v ...
随机推荐
- octave基本指令5
octave基本指令5 控制语句 for >> v=zreos(5,1) v = 0 0 0 0 0 >> for i=1:10, > v(i) = 2^i; > ...
- octave基本指令3
octave基本指令3 数据运算 >> a = [1 2; 3 4; 5 6]; >> b = [11 12; 13 14; 15 16]; >> c = [1 1 ...
- JavaScript使用jsonp实现跨域
为什么要把ajax跨域写一下呢,因为ajax跨域并不是想跨就能跨的.因为为了安全,ajax是不允许跨域的. 举个例子,你有一个卖水果的网站,你的ajax请求另一个网站提供的图片,正常的时候,图片是一个 ...
- C/C++关键字 new/delete和malloc/free
基本上new/delete来自于C++,作为对对象的创建.因此在使用new创建对象时候new会调用对象的构造函数,同样delete会调用对象的析构函数释放对象.而malloc/free操作的是直接的内 ...
- Typecho博客迁移
在新的机器上先搭建好一个新的Typecho博客,数据库名称和原博客相同(可以省不少事). 备份原来博客的usr目录. 备份mysql数据库,命令: mysqldump -uroot -p --all- ...
- VSCODE安装以及使用Python运行调试代码的简单记录
1. VScode安装 官网下载VSCODE https://code.visualstudio.com/ 下载呢windows的x64安装包,安装stable的版本 当前日期 2018.01.15 ...
- SAP PA认证
----------------------------------------------------------------转帖---------------------------------- ...
- elk安装最佳实践
一.添加清华源 .x.repo<<EOF [elasticsearch-.x] name=Elasticsearch repository .x packages baseurl=http ...
- ADODataSet与ADOQuery的区别
ADODataSet组件 此组件功能是非常强大的,通过ADODataset,可以直接与一个表进行联接,也可以执行SQL语句,还可以执行存储过程,可以说集ADOTable. ADOQuery. A ...
- Bootstrap手风琴效果
前面的话 Bootstrap 框架中 Collapse插件(折叠)其实就是我们常见的手风琴效果.当单击一个触发元素时,在另外一个可折叠区域进行显示或隐藏,再次单击时可以反转显示状态.经典的场景是多个折 ...