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 ...
随机推荐
- VS2013编译google protobuf 出现问题error C3861: “min”:
问题描述: 今天用vs2013编译protobuf 2.4.1 报错: 错误 3 error C3861: "max": 找不到标识符 f:\google\protobuf\pro ...
- web框架django初探
Web框架介绍 一般会分为两部分:服务器程序和应用程序.服务器程序负责对socket服务器进行封装,并在请求到来时,对请求的各种数据进行整理.应用程序则负责具体的逻辑处理.为了方便应用程序的开发,就出 ...
- QEMU/KVM虚拟机安装配置
1.安装相关组件: [root@KVM ~]# yum install qemu-img qemu-kvm qemu-kvm-tools virt-manager virt-viewer virt-v ...
- 隐藏NavigationBar的正确方式
-(void)viewWillAppear:(BOOL)animated { [self.navigationController setNavigationBarHidden:YES animate ...
- 【原创】自己动手写工具----XSmartNote [Beta 3.0]
一.前面的话 在动笔之前,一直很纠结到底要不要继续完成这个工具,因为上次给它码代码还是一年多之前的事情,参考自己动手写工具----XSmartNote [Beta 2.0],这篇博文里,很多园友提出了 ...
- 常用的js方法,包括表单校验的一些方法
/** * 对JSON对象转换为字符串. * @param {json对象} json * @return {json字符串} */ function jsonObj2Str(json) { var ...
- CSS-学习笔记三
绝对定位:1. 脱离了文档流,没有浮动效果2. 默认情况下,设置了绝对定位的块,它的Top,left是相对于浏览器的3. 当给设置了绝对定位的块的父元素设置定位的时候(绝对.相对.固定), 那么 ...
- Web爬虫入门
1.0示例学习:Web爬虫 public class WebCrawler { // 种子url private static String url = "http://www.cnblog ...
- 【ASP.NET程序员福利】打造一款人见人爱的ORM(一)
“很多人都不太认可以第三方ORM,因为考虑的点不够全面,没有大用户群体的ORM有保证,这点是不可否认确是事实.但是往往用户群体大的ORM又有不足之处,今天我们就来聊聊关于ORM的话题,打造 ...
- 记一次特别的bug
问题现象 push入某个特定的画页,然后再pop出来,然后再切换不同的tabbaritem就会崩溃,而且没有任何提示,也没法定位崩溃位置,哪怕用了$arg1. 猜测,这种情况坏访问的可能性比较大,至少 ...