js学习进阶-元素获取及样式设置
var imgs = document.querySelectorAll("article img");
获得article元素的直接或间接子孙的所有img元素,
<article>
<img src = "..." />
<div>
<img src = "..." />
</div>
</article>
获取2个img元素。
另一个方法querySelector()只返回找到的第一个结果。
其他的获取元素的写法区别:
获取article直接子元素:var imgs = document.querySelectorAll("article> img");
获取紧跟在一个元素后面的所有某个元素: var imgs = document.querySelectorAll("img + p");
获取一个空属性的某个元素: var imgs = document.querySelectorAll("img[alt='']");
获取属性不为空的某个元素: var imgs = document.querySelectorAll("img:not([alt=''])");
/*querySelectorAll()获取的元素集合不是“动态”的,如果更新发布在获取集合之后,页面所做的更新不会反映在集合之中,通常使用的getElementById() 效率更高*/
css样式设置(三种):
通过元素的style属性来修改:elem.style.backgroundColor = "red";
/*样式命名“驼峰”表示法,第二个单词大写*/
修改单个元素的一个或多个属性:
elem.setAttribute("style","background-color:red; color:white; border:1px solid black");
预定义样式,设置元素的class属性:
.stipe{
background-color:red;
color:white;
border:1px solid black;
}
....
elem.setAttribute("class","stripe");
对于获取某个元素属性值使用getAttribute(),
要访问一个元素在某一时刻的具体样式设置,比较复杂,也没太明白,这里先放一个例子,供以后参考:
var elem = document.getElementbyId("test"); var bkcolor = elem.currentStyle ? elem.currentStyle["backgroundColor"] : window.getComputedStyle(elem).getPropertyValue("background-color"); console.log(bkcolor);
可以跨浏览器工作,以后接触到再重新研究一下!
js学习进阶-元素获取及样式设置的更多相关文章
- 每天一个JavaScript实例-展示设置和获取CSS样式设置
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...
- js函数arguments与获取css样式方法
函数传参,当参数的个数不定时,可以使用arguments:表示实参集合 arguments.length=实参个数 获得css样式方法: getComputedStyle()方法---->得到的 ...
- js学习进阶-页面覆盖
页面覆盖以显示一条信息,照片或者常见的登录,广告, 实例: <!DOCTYPE html> <html> <head> <meta charset=" ...
- js学习进阶中-bind()方法
有次面试遇到的,也是没说清楚具体的作用,感觉自己现在还是没有深刻的理解! bind():绑定事件类型和处理函数到DOM element(父元素上) live():绑定事件到根节点上,(document ...
- JS学习进阶中 come on!
1,定义新的属性来扩展对象 新方法:defineProperty() 实例: var data = {}: Object.defineProperty(data,"type",{ ...
- js兼容方法:获取当前样式|计算后样式 getStyle
function getStyle(obj,attr){ if(obj.currentStyle){ //for IE return obj.currentStyle[attr]; }else{ re ...
- vue学习(九) 使用内联样式设置style样式
/html <div id="app"> //对象就是无序键值对的集合 <h1 :style="{ color:red, 'font-weight':2 ...
- js学习笔记7----return,arguments及获取元素样式
1.return:返回值 1)函数名+括号:fn() ===> return; 2) 所有函数默认返回值:undefind; 3) return后面所有的代码都不会执行; 2.arguments ...
- js 设置 获取css样式
先看一段代码,为了体现一会下面说的js用style获取css样式的不同 一:给div设置margin-left(用style设置css样式没什么问题) box.style.marginLeft=&qu ...
随机推荐
- MSMQ学习
一.理论准备 MSMQ(MicroSoft Message Queue,微软消息队列)官方的解释是:在多个不同的应用之间实现相互通信的一种异步传输模式,相互通信的应用可以分布于同一台机器上,也可以分布 ...
- 【BZOJ-3270】博物馆 高斯消元 + 概率期望
3270: 博物馆 Time Limit: 30 Sec Memory Limit: 128 MBSubmit: 292 Solved: 158[Submit][Status][Discuss] ...
- div+css:两个div并排等高 (table-cell)
两个div并排等高 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> < ...
- destoon : 后台无法登录问题解决
经常有朋友在destoon搬家的时候 , 数据还原之后 , 会出现后台无法登录的情况 . 具体表现为后台帐号密码输入后点击确定 , 页面刷新 .并没有跳转到相应后台页面 . 但是如果帐号密码输入错误 ...
- 【mysql】mysql 常用建表语句
[1]建立员工档案表要求字段:员工员工编号,员工姓名,性别,工资,email,入职时间,部门.[2]合理选择数据类型及字段修饰符,要求有NOT NULL,auto_increment, primary ...
- Web爬虫入门
1.0示例学习:Web爬虫 public class WebCrawler { // 种子url private static String url = "http://www.cnblog ...
- github怎么退出组织和删除自己创建的组织
1. 点击头像,进入settings 2. 点击左侧菜单中的 Organizations 切换到Origanizations后,右侧面板中会出现所有的oragnizations,我这里只有一个,是我自 ...
- getElementsByClassName简单实现
function getElementsByClassName(node, className) { var aClassReg = className.split(' ').map(function ...
- C#对于文件的读写
C#文件的读写操作 转载请注明出处 http://www.cnblogs.com/Huerye/ /// <summary> /// 写入txt文件 /// </summary> ...
- 遍历Map的方法
1.使用 entrySet() entrySet() --> 官方推荐将Map转换成Map.Entry对象的Set集合 Set entrys = map.entrySet(); Iterat ...