根据标签的属性找节点

最新推荐文章于 2024-09-14 18:52:56 发布

weixin_30449453

最新推荐文章于 2024-09-14 18:52:56 发布

阅读量71

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/linst/p/5723536.html

版权

<script type="text/javascript">
/*
    通过html元素的标签属性找节点。
        document.getElementById("html元素的id") 
        document.getElementsByTagName("标签名") 
        document.getElementsByName("html元素的name")
*/

    function showText(){
        var inputNode = document.getElementById("userName");  //根据ID属性值找元素
        inputNode.value = "设置好了文本";
    }
    //InnerHTml是用于设置标签体的内容的。 value是用于设置标签的value属性值.


    function showImage(){
        var images = document.getElementsByTagName("img"); //根据标签名获取所有的标签对象。
        for(var i = 0 ; i<images.length ; i++){
            images[i].src = "33.jpg";
            images[i].width="100";
            images[i].height="100";
        }
    }
    
    
    
     function showDiv(){
        var divs = document.getElementsByName("info"); //根据标签的name属性值取找对应的标签，返回的是一个数组。
        for(var i = 0 ; i<divs.length ; i++){
            divs[i].innerHTML = "哈哈".fontcolor("red");    
        }
    }



</script>

<body>    
    <input type="text" id="userName" value="请输入用户名..." /><input type="button" onclick="showText()" value="设置文本"/>
    <hr/>
    
    <img src="" />
    <img src="" />
    <img src="" />
    <input type="button" onclick="showImage()" value="显示图片"/>
   <hr/>
    <div name="info"></div>
    <div name="info"></div>
    <div name="info"></div>
     <input type="button" onclick="showDiv()" value="设置div内容"/>
    
</body>