跪求！点击两个button按钮改变所有iframe标签边框颜色，如何实现

javascript css标签functiongetElementsByTagName

解决方案 »

  1.   


            function get1() {
             var array = document.getElementsByTagName("iframe");
             for (var i=0; i < array.length; i++) {
                array[i].className='iframe c1';
             }
                //document.getElementsByTagName("iframe").className = "iframe c1";
            }
            function get2() {
                     var array = document.getElementsByTagName("iframe");
             for (var i=0; i < array.length; i++) {
                array[i].className='iframe c2';
             }
    //            document.getElementsByTagName("iframe").className = "iframe c2";
            }
       
      

  2.   

    在线演示代码。
    主要是getTagName获取的元素是个集合，得用for循环来取。<!DOCTYPE html>
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta charset="utf-8"/>
        <title>无标题页</title>
        <style>
            body{
                font-size:12px;
                padding-top:32px;
            }        iframe{
                width:600px;
                text-align:center;
                margin:0px auto;
                height:420px;
            }        .c1{
                border:1px solid blue;
            }        .c2{
                border:1px solid #ff0000;
            }
        </style>
        <script>
            function setCls(cls){
                var iframe = document.getElementsByTagName("iframe");
                for(var i = 0; i < iframe.length; i++){
                    iframe[i].className = cls;
                }
            }
            function get1(){
                setCls('iframe c1');
            }
            function get2(){
                setCls('iframe c2');
            }
        </script>
    </head><body>
    <iframe src="#"></iframe>
    <iframe src="#"></iframe>
    <iframe src="#"></iframe>
    <iframe src="#"></iframe>
    <iframe src="#"></iframe>
    <iframe src="#"></iframe>
    <div>
        <input type="button" value="边框蓝色" onclick="get1()"/>
        <input type="button" name="button" id="button" value="边框红色" onclick="get2()"/>
    </div>
    </body>
    </html>