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学习进阶-元素获取及样式设置的更多相关文章

  1. 每天一个JavaScript实例-展示设置和获取CSS样式设置

    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...

  2. js函数arguments与获取css样式方法

    函数传参,当参数的个数不定时,可以使用arguments:表示实参集合 arguments.length=实参个数 获得css样式方法: getComputedStyle()方法---->得到的 ...

  3. js学习进阶-页面覆盖

    页面覆盖以显示一条信息,照片或者常见的登录,广告, 实例: <!DOCTYPE html> <html> <head> <meta charset=" ...

  4. js学习进阶中-bind()方法

    有次面试遇到的,也是没说清楚具体的作用,感觉自己现在还是没有深刻的理解! bind():绑定事件类型和处理函数到DOM element(父元素上) live():绑定事件到根节点上,(document ...

  5. JS学习进阶中 come on!

    1,定义新的属性来扩展对象 新方法:defineProperty() 实例: var data = {}: Object.defineProperty(data,"type",{ ...

  6. js兼容方法:获取当前样式|计算后样式 getStyle

    function getStyle(obj,attr){ if(obj.currentStyle){ //for IE return obj.currentStyle[attr]; }else{ re ...

  7. vue学习(九) 使用内联样式设置style样式

    /html <div id="app"> //对象就是无序键值对的集合 <h1 :style="{ color:red, 'font-weight':2 ...

  8. js学习笔记7----return,arguments及获取元素样式

    1.return:返回值 1)函数名+括号:fn() ===> return; 2) 所有函数默认返回值:undefind; 3) return后面所有的代码都不会执行; 2.arguments ...

  9. js 设置 获取css样式

    先看一段代码,为了体现一会下面说的js用style获取css样式的不同 一:给div设置margin-left(用style设置css样式没什么问题) box.style.marginLeft=&qu ...

随机推荐

  1. jquery和zepto的扩展方法extend

    jquery和zepto的扩展方法extend 总结下jQuery(3.1.1)和zepto(1.1.6)到底是如何来开放接口,使之可以进行扩展,两者都会有类型判断,本文使用简单的类型判断,暂不考虑兼 ...

  2. flask-- 基础篇

    flask简介: flask是一轻量级的web应用框架,它的实现是一个 wsgi 的微("Micro")框架,当然微("Micro")也不意味这它的功能存在不足 ...

  3. Android——Handler

    Handler——是Android给我们提供用来更新UI的一套机制,也是一套消息处理机制,可以发送也可以处理消息 主要作用:1)在新启动的线程中发送消息:2)在主线程中获取.处理消息. (想想银行取钱 ...

  4. bzoj2702[SDOI2012]走迷宫

    题意:给你一个有向图,点数10000,边数1000000,SCC大小不超过100(按数据范围的写法只有第三部分数据满足这个条件,不过第二部分数据并没有出现大小大于100个点的SCC,我是用数组大小为1 ...

  5. [转]CSS 类名的单词连字符:下划线还是横杠?

    问题 CSS 类或 ID 命名时单词间连接通常有这几种写法: 驼峰式: solutionTitle.solutionDetail 用横杠连接: solution-title.solution-deta ...

  6. rmarkdown教程

    https://github.com/yihui/r-ninja/blob/master/11-auto-report.md http://rpubs.com/about/getting-starte ...

  7. React项目(一):markdown编辑器

    在之前的React官网教程中,提到了用Remarkable为插件的markdown评论框.现在就来正儿八经地用另外一个插件marked.js做一个markdown编辑器吧! 准备工作 或许在做之前,应 ...

  8. 记录分享公司Spring data相关配置

    起因 公司Spring Data相关的配置还是有点意思的,不过蛮复杂的...XML很多...我不太喜欢强行记住....所以我打算记录一下配置的大致思路和结构,以后可能会有用.... 总体结构 总体结构 ...

  9. js中数组去除重复项目

    js语法技巧:if(a>=5)  alert();  可以改写成下边语句:  a>=5&&alert(); 在下文中会用到这种写法 // for循环删除后面重复的 速度最快 ...

  10. qemu 源码调试

    1:下载最新的QEMU源码 git clone https://github.com/qemu/qemu.git 2:对qemu进行编译 ./configure --prefix=/usr --lib ...