利用js_API 执行对html文档元素的属性的CRUD操作

转自：http://my.oschina.net/felay/blog/303470
<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>对html元素属性的增删改查操作</title>

<style>

    #attr{text-align:center;font-size:24px;color:white;background:#008000;width:400px;height:30px; }

    .myclass{background:#828555;}

</style>

</head>

<body>

    <div id="attr" class = "attrs" lang = "en"  >对html元素属性的增删改查操作</div>

    <hr />

    <button id="getAttr" onclick="getAttr()">访问DIV属性</button>

    <button id="updateAttr" onclick="updateAttr()">修改DIV属性</button>

    <button id="deleteAttr" onclick="deleteAttr()">删除DIV属性</button>

    <button id="addAttr" onclick="addAttr()">增加DIV属性</button>

    <script>

        //简化打印

        function print(str){

            document.write(str+"<br/>");

        }

        //简化获取id

        function $(id){

            return document.getElementById(id);

        }

        //遍历元素属性

        function listNodeList(attrList){

            for (var i = 0; i < attrList.length; i++) {

                print(attrList[i].nodeName+"--->"+attrList[i].nodeValue);

            }

        }

        //访问其属性

        function getAttr(){

            var divNode = $("attr");

            var attrList = divNode.attributes;

            print("属性名称--->属性值");

            listNodeList(attrList);

        }

        //修改属性,两种方式,推荐前一种

        function updateAttr(){

            var divNode = $("attr");

            //第一种

            divNode.setAttribute("class","myclass"); //推荐这种

            //第二种

            /*

            var attrList = divNode.attributes;

            for (var i = 0; i < attrList.length; i++) {

                if(attrList[i].nodeName == "class"){//如果属性值为class,我们就修改它

                    attrList[i].nodeValue = "myclass";

                    break;

                }

            }

            listNodeList(attrList);//如果查看修改的属性值,打开注释

            */

        }

        //删除指定属性

        function deleteAttr(){

            var divNode = $("attr");

            divNode.removeAttribute("id");

        }

        //增加新的属性

        function addAttr(){

            var divNode = $("attr");

            var attrList = divNode.attributes;

            divNode.setAttribute("title","mytitle");

            listNodeList(attrList);

        }

    </script>

</body>

</html>
巴特西

利用js_API 执行对html文档元素的属性的CRUD操作

最新文章

热门文章
