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. VS2013编译google protobuf 出现问题error C3861: “min”:

    问题描述: 今天用vs2013编译protobuf 2.4.1 报错: 错误 3 error C3861: "max": 找不到标识符 f:\google\protobuf\pro ...

  2. web框架django初探

    Web框架介绍 一般会分为两部分:服务器程序和应用程序.服务器程序负责对socket服务器进行封装,并在请求到来时,对请求的各种数据进行整理.应用程序则负责具体的逻辑处理.为了方便应用程序的开发,就出 ...

  3. QEMU/KVM虚拟机安装配置

    1.安装相关组件: [root@KVM ~]# yum install qemu-img qemu-kvm qemu-kvm-tools virt-manager virt-viewer virt-v ...

  4. 隐藏NavigationBar的正确方式

    -(void)viewWillAppear:(BOOL)animated { [self.navigationController setNavigationBarHidden:YES animate ...

  5. 【原创】自己动手写工具----XSmartNote [Beta 3.0]

    一.前面的话 在动笔之前,一直很纠结到底要不要继续完成这个工具,因为上次给它码代码还是一年多之前的事情,参考自己动手写工具----XSmartNote [Beta 2.0],这篇博文里,很多园友提出了 ...

  6. 常用的js方法,包括表单校验的一些方法

    /** * 对JSON对象转换为字符串. * @param {json对象} json * @return {json字符串} */ function jsonObj2Str(json) { var ...

  7. CSS-学习笔记三

    绝对定位:1. 脱离了文档流,没有浮动效果2. 默认情况下,设置了绝对定位的块,它的Top,left是相对于浏览器的3. 当给设置了绝对定位的块的父元素设置定位的时候(绝对.相对.固定),    那么 ...

  8. Web爬虫入门

    1.0示例学习:Web爬虫 public class WebCrawler { // 种子url private static String url = "http://www.cnblog ...

  9. 【ASP.NET程序员福利】打造一款人见人爱的ORM(一)

          “很多人都不太认可以第三方ORM,因为考虑的点不够全面,没有大用户群体的ORM有保证,这点是不可否认确是事实.但是往往用户群体大的ORM又有不足之处,今天我们就来聊聊关于ORM的话题,打造 ...

  10. 记一次特别的bug

    问题现象 push入某个特定的画页,然后再pop出来,然后再切换不同的tabbaritem就会崩溃,而且没有任何提示,也没法定位崩溃位置,哪怕用了$arg1. 猜测,这种情况坏访问的可能性比较大,至少 ...