js学习进阶-元素获取及样式设置

Posted 2020-08-19 HeroBo

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属性：

1 .stipe{
2   background-color:red;
3   color:white;
4   border:1px solid black;    
5 }
6 ....
7 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);

　　可以跨浏览器工作，以后接触到再重新研究一下！