获取网页元素样式-优快云博客

本文介绍如何使用JavaScript获取HTML页面中元素及其样式的多种方法，包括getElementById, getElementsByTagName等，并展示了如何获取行内及非行内样式的具体实现。


<!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>