Dom学习

最新推荐文章于 2021-05-08 21:45:36 发布

怎么演

最新推荐文章于 2021-05-08 21:45:36 发布

阅读量585

点赞数

分类专栏：【2.3技术】.JS+JQUERY 文章标签： function input javascript table button css

本文链接：https://blog.csdn.net/lhfight/article/details/7411684

版权

【2.3技术】.JS+JQUERY 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

案例1：
创建三个输入文本框，当光标离开文本框时如果文本框为空，则将文本框的背景色设置为红色，如果不为空则为白色。提示：焦点进入控件的事件是onfocus，焦点离开控件的事件是onblur。

<script type ="text/javascript">
    function initiail(){
    var inputs=document.getElementsByTagName("input");
    for(var i=0;i<inputs.length;i++){
    var input=inputs[i];
    input.οnblur=function(){
    if(this.value.length<=0)
    {
    this.style.background="red";
    }
    else{this.style.background="white";}
    }
    }
    }

    </script>
</head>
<body onload ="initiail()">
<input type ="text" />
<input type ="text" />
<input type ="text" />
<input type ="text" />
<input type ="text" />
</body>

易错：单独修改样式的属性使用"style.属性名"。注意在css中属性名在JavaScript中操作的时候属性名可能不一样，主要集中在那些属性名中包含-的属性，因为JavaScript中-是不能做属性、类名的。所以CSS中背景颜色是background-color，而JavaScript则是style.background，元素样式名是class，在JavaScript中是calssName属性；font-size—>style.fontSize;margin-top—> style.marginTop。

实例：
   <script type="text/javascript">
          function say-hello()
              {alert("hello");}

   <body οnlοad="say-hello()"></body>//报错:'say'未定义

单独修改控件的样式<input type="button" value="AAA" οnclick="this.style.color='red'"/>

案例2：评分控件V1，用一个单行5列的Table做评分控件，监听td的click事件，点击一个td的时候，将这个td及之前的td背景变为红色，之后的td背景变为白色。鼠标在评分控件上的时候显示超链接形式的鼠标图标。 }

<script type ="text/javascript">
    function initial(){
        var tableid=document.getElementById("tableid");
        var tds=tableid.getElementsByTagName("td");
        for(var i=0;i<tds.length;i++){
            var td=tds[i];
            td.style.cursor="pointer";
            td.οnmοuseοver=tdOnclick;
            
        }
    }
    function tdOnclick(){
        var tableid=document.getElementById("tableid");
        var tds=tableid.getElementsByTagName("td");
        var index= indexOf(tds,this);
        for(var i=0;i<=index;i++){
            tds[i].style.color="green";
        }
        for(var j=index+1;j<tds.length;j++){
            tds[j].style.color="black";
        }
           /*for(var i=0;i<tds.length;i++){
            if(tds[i]==event.srcElement){
                for(var j=0;j<=i;j++){
                    tds[j].style.color="green";
                }
                for(var k=i+1;k<tds.length;k++){
                    tds[k].style.color="black";
                }
            }   
        }*/
    }
    function indexOf(arr,element){
        for(var i=0;i<arr.length;i++){
            if(arr[i]==element){
                return i;
            }    
        }
         return -1;
    }
    </script>
</head>
<body onload ="initial()">
<table id="tableid"><tr>
<td>☆</td>
<td>☆</td>
<td>☆</td>
<td>☆</td>
<td>☆</td>
</tr></table>
</body>

练习1：超链接的单选效果，页面上若干个超链接，点击一个超链接的时候被点击的超链接变为红色背景，其他超链接背景还原为白色。

<script type ="text/javascript">
    function init(){
        var links=document.getElementsByTagName("a");
        for(var i=0;i<links.length;i++){
           var link=links[i];
            link.οnclick=linkOnclick;
           
        }
    }
    function linkOnclick(){
        var links=document.getElementsByTagName("a");
        for(var i=0;i<links.length;i++){
           var link=links[i];
           if(link==this) {
                link.style.background="red";
           }
           else{
                link.style.background="white";
           }
        }
        
       window.event.returnValue=false;

    }
    </script>
</head>
<body οnlοad="init()">
 <a href="http://www.sina.com.cn">新浪</a><br/>
 <a href="http://www.sina.com.cn">百度</a><br/>
 <a href="http://www.sina.com.cn">谷歌</a><br/>
 <a href="http://www.sina.com.cn">新华</a><br/>
 <a href="http://www.sina.com.cn">天涯</a><br/>
</body>

练习2：表格隔行变色:偶数行为黄色背景，奇数行为默认颜色

<script type ="text/javascript">
    function init(){
        var tableid=document.getElementById("tableid");
        var trs=tableid.getElementsByTagName("tr");
        for(var i=0;i<trs.length;i++){
            if((i+1)%2==0){
                trs[i].style.background="red";
            }
        }
    }
    </script>
</head>
<body onload ="init()">
<table id="tableid">
<tr><td>dfddddddddddf</td></tr>
<tr><td>dfdfddddddddddd</td></tr>
<tr><td>dfdfddddddd</td></tr>
<tr><td>dfdddddddddddf</td></tr>
<tr><td>dfdfdddddddddd</td></tr>
<tr><td>dfddddddddddf</td></tr>
</table>
</body>

练习3：获得焦点的文本框黄色背景，其他控件背景颜色还原

<script type ="text/javascript">
    function init(){
        var inputs =document.getElementsByTagName("input");
        for(var i=0;i<inputs.length;i++){
            input=inputs[i];
            input.οnfοcus=inputFocus;
        }
    }
    function inputFocus(){
        var inputs =document.getElementsByTagName("input");
        for(var i=0;i<inputs.length;i++){
            input=inputs[i];
            if(input==this){
                input.style.background="yellow";
            }
            else{
                input.style.background="white";
            }
        }
    }
    </script>
</head>
<body onload ="init()">
<input type ="text" />
<input type ="text" />
<input type ="text" />
<input type ="text" />
<input type ="text" />
</body>

练习4：点击表格行，被点击的行高亮显示(背景是黄色)，其他行白色背景。监听每个tr的onclick事件，将点击的背景设置为黄色，其他的设置为白色背景。

<script type="text/javascript">
    function init(){
        var tableid=document.getElementById("tableid");
        var trs=tableid.getElementsByTagName("tr");
        for(var i=0;i<trs.length;i++){
            tr=trs[i];
            tr.οnmοuseοver=trOnclick;
            tr.style.cursor="pointer";
        }
    }
    function trOnclick(){
        var tableid=document.getElementById("tableid");
        var trs=tableid.getElementsByTagName("tr");
        for(var i=0;i<trs.length;i++){
            tr=trs[i];
            if(tr==this){
                tr.style.background="yellow";
            }
            else{
                tr.style.background="white";
            }
        }
    }
    </script>
</head>
<body onload ="init()">
<table id="tableid">
    <tr><td>dfddddddddddd</td></tr>
    <tr><td>dfddddddddddd</td></tr>
    <tr><td>dfddddddddddd</td></tr>
    <tr><td>dfddddddddddd</td></tr>
    <tr><td>dfddddddddddd</td></tr>
    <tr><td>dfddddddddddd</td></tr>
</table>
</body>

怎么演

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
Dom学习

案例1：创建三个输入文本框，当光标离开文本框时如果文本框为空，则将文本框的背景色设置为红色，如果不为空则为白色。提示：焦点进入控件的事件是onfocus，焦点离开控件的事件是onblur。 function initiail(){ var inputs=document.getElementsByTagName("input"); for(var i=0;
复制链接

扫一扫