<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>获取元素及对应样式</title>
</head>
<style>
.yellowColor{
background-color: yellow;
}
.firstLine{
background-color: red;
color: green;
font-size: 30px;
}·
#styleTest {
color: #0f2f91;
position: relative;
left: 500px;
font-size: 20px;
}
</style>
<body>
<ul id="nameUL" name="myUl">
<li name="li" class="item1"></li>
<li name="li" class="item" id="liSi">李四</li>
<li name="li" class="item">王五</li>
<li name="li" class="item">孙六</li>
<li name="li" class="item">田七</li>
</ul>
<div id="styleTest" style="font-size: 30px;">
我是用来测试如何获取元素样式的
</div>
<script>
/*getElementById getElementById的主语只能是document，不能是其他元素节点*/
console.log("--------getElementById----------");
var nameUL = document.getElementById("nameUL");
console.log(nameUL);
/*getElementByName getElementByName的主语只能是document，不能是其他元素节点*/
console.log("--------getElementsByName----------");
var lis = document.getElementsByName("li");
console.log(lis);
/*getElementsByTagName getElementsByTagName的主语既可以是document，也可以是其他的元素节点*/
console.log("--------getElementsByTagName----------");
var lis = document.getElementsByTagName("li");
console.log(lis);
var nameUL = document.getElementById("nameUL");
var lis = nameUL.getElementsByTagName("li");
console.log(lis);
/*getElementByClassName getElementByClassName的主语既可以是document，也可以是其他的元素节点*/
console.log("---------getElementByClassName---------");
var listItems = document.getElementsByClassName("item");
console.log(listItems);
var listItems = document.getElementById("nameUL");
var item = listItems.getElementsByClassName("item");
console.log(item);
/*querySelector 即使有多个满足条件的元素 只会取第一个*/
console.log("---------querySelector---------");
var first = document.querySelector("#nameUL li:last-child");
//first.style.backgroundColor = "yellow";/!*优先级比className定义的高*!/
//first.className = "firstLine";
/* querySelectorAll 返回所有满足条件的元素集合*/
console.log("---------querySelectorAll---------");
var all = document.querySelectorAll("#nameUL li");
var color = ["red","yellow","blue","green","orange"];
for(var i = 0;i<all.length;i++){
all[i].style.backgroundColor = color[i];
}
console.log("------------获取行内样式的值---------------");
/*通过.style方法，获取或者设置的样式都是行内样式。获取行间元素的的方法*/
var left = document.getElementById("styleTest");
console.log(left.style.fontSize);//30px
console.log(left.style.left);//没有
console.log("------------获取非行内样式的值---------------");
/*获取非行间样式对应元素的样式 IE用对应元素.currentStyle 其他浏览器为window.getComputedStyle*/
var myDiv = document.getElementById("styleTest");
var style = window.getComputedStyle(myDiv,null);
console.log(style.left);
console.log(style.color);
console.log(style.position);
console.log(style.fontSize);
/*针对不同的浏览器采用不同的方法*/
if(myDiv.currentStyle){ /*用于区分是什么类型的浏览器 IE*/
var style = myDiv.currentStyle;
console.log(style.left);
}else{ /*用于其他类型的浏览器*/
var style = window.getComputedStyle(myDiv,null);
console.log(style.left);
}
</script>
</body>
</html>