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. Git中如何利用生成SSH个人公钥访问git仓库

    Git中如何利用生成SSH个人公钥访问git仓库方法(这里以coding平台为例): 1. 获取 SSH 协议地址 在项目的代码页面点击 SSH 切换到 SSH 协议, 获得访问地址, 请使用这个地址 ...

  2. C++ 自由存储区是否等价于堆?

    "free store" VS "heap" 当我问你C++的内存布局时,你大概会回答: "在C++中,内存区分为5个区,分别是堆.栈.自由存储区.全 ...

  3. BZOJ 2879: [Noi2012]美食节

    2879: [Noi2012]美食节 Time Limit: 10 Sec  Memory Limit: 512 MBSubmit: 1834  Solved: 969[Submit][Status] ...

  4. css权威指南学习笔记 —— css选择器

    1,选择器:选择器的一些基本常用规则基本都记得,w3c上都有,平时也常用,不常用的一些后代选择器经常就忘记了.一些归纳一下后代选择器,加深一下印象: a:子选择器:   p>a  a是直接是p的 ...

  5. sublime 安装插件GitGutter报错,git binary cannot be found等等

    今天给sublime text安装插件GitGutter的时候,居然报错了,网上查找了下解决方法,在此记录下.因为本博主的电脑是windows的,所以这里只能提供windows的方法啦. 解决方法很简 ...

  6. 一个php 字符串判断问题

    先看代码 你觉得下面的代码会输出什么结果: <?php $a = "10"; $b = "1e1"; if($a == $b ) { echo " ...

  7. MyEclipse安装插件的几种方法

    本文讲解MyEclipse(MyEclipse10)的三种方法,以SVN为例 Eclipse update site URL: http://subclipse.tigris.org/update_1 ...

  8. leetcode--Different Ways to Add Parentheses

    题目链接:https://leetcode.com/submissions/detail/86532557/ 算法类型:分治法 题目分析:计算表达式的所有结果可能性 代码实现: class Solut ...

  9. ubuntu16.04(beaglebone) 下vim 和gcc 的信息

    root@arm:~# dpkg -L gcc /. /usr /usr/bin /usr/bin/c99-gcc /usr/bin/c89-gcc /usr/share /usr/share/doc ...

  10. Linux查找命令

    最近,我在学习Linux,下面是一些笔记. 使用电脑的时候,经常需要查找文件. 在Linux中,有很多方法可以做到这一点.国外网站LinuxHaxor总结了五条命令,你可以看看自己知道几条.大多数程序 ...