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 ...
随机推荐
- my项目的总结2015.8.26编
这已经是上上个星期的事了,现在回顾一下: 负责的模块是"my",更精准的说应该是my里面的个人信息管理 由于项目分域,模块已经分好了,涉及到的只是在现有的基础上解决分域后遗留的历史 ...
- 修复PLSQL Developer 与 Office 2010的集成导出Excel 功能
Windows Registry Editor Version 5.00 [HKEY_CLASSES_ROOT\.htm]"PerceivedType"="text&qu ...
- Selenium的自我总结2_元素基本操作
对于Selenium的基本元素的操作,就自己的了解做了一个基本的介绍,这篇直接上代码,针对一个页面如何操作写了些基本的操作脚本,希望对初学者有一定的帮助,也希望通过这些总结让自己有一些清晰的认识和了解 ...
- linux 清空history以及记录原理
1.当前session执行的命令,放置缓存中,执行exit时,把缓存信息写入~/.bash_history 2.当session直接被kill时,缓存中的历史命令不会写入~/.bash_history ...
- number （2）变量相关错误
变量没有被定义 fw cannot be resolved 变量没有被初始化 正确代码 package com.itheima_01; import java.io.FileWriter;import ...
- pandas文件写入读取操作
#encoding:utf8 import pandas as pd import numpy as np from pylab import * df=pd.read_csv("./pat ...
- python之函数（可选参数和混合参数）
代码举例: # 函数可选参数举例,hoppy参数可传可不传 def getinfo(name, age, hoppy=''): if hoppy: print("name:", n ...
- CF1037D Valid BFS?
Valid BFS? CodeForces - 1037D The BFS algorithm is defined as follows. Consider an undirected graph ...
- Python中正则表达式的巧妙使用
字符串的匹配查询 re模块中的findall函数可以对指定的字符串进行遍历匹配,获取字符串中所有匹配的子串,并返回一个列表结果.该函数的参数含义如下: findall(pattern, string, ...
- BZOJ5371[Pkusc2018]星际穿越——可持久化线段树+DP
题目描述 有n个星球,它们的编号是1到n,它们坐落在同一个星系内,这个星系可以抽象为一条数轴,每个星球都是数轴上的一个点, 特别地,编号为i的星球的坐标是i. 一开始,由于科技上的原因,这n个星球的居 ...