zoukankan      html  css  js  c++  java
  • 按钮选择、样式改变

    案例一:目的:通过按钮实现全选、全不选、反选等功能。

    思路:第一步:根据标签数设置input标签,根据按钮数设置bottom标签进行布局;第二步:Js 需要判断每一个input标签是否为真值,全选的时候为真值,全不选的时候为假值,反选的时候需要用到if判断,如果为真则为空,否则为假,采用下角标的方式,inpt[i]的方式 来判断,检查checked的值。

    代码如下:

    <body>

    <p> 请选择你要学的课程</p>

    <input type="checkbox"/>HTML

    <input type="checkbox"/>CSS

    <input type="checkbox"/>Javascript

    <input type="checkbox"/>JQuery

    <input type="checkbox"/>PHP

    <input type="checkbox"/>C语言

    <input type="checkbox"/>Python

    <button id="btn1">全选</button>

    <button id="btn2">全不选</button>

    <button id="btn3">反选</button>

    <script type="text/javascript">

    var btn1=document.getElementById("btn1");

    var btn2=document.getElementById("btn2");

    var btn3=document.getElementById("btn3");

    var inpt=document.getElementsByTagName("input");

    btn1.onclick=function(){

    for(var i=0;i<=inpt.length-1;i++){

    inpt[i].checked=true;

    };

    };

    btn2.onclick=function(){

    for(var i=0;i<=inpt.length-1;i++){

    inpt[i].checked=false;

    };

    };

    btn3.onclick=function(){

    for(var i=0;i<=inpt.length-1;i++){

    if(inpt[i].checked===false){

    inpt[i].checked=true;

    } else{

    inpt[i].checked=false;

    };

    };

    };

    </script>

    </body>

     

    效果如下:

    点击反选后:

    案例二:目的:通过按钮实现样式变宽变高变背景等功能。

    注意事项:在Js原生的代码中backgroundColor的写法,应该用驼峰命名法,后面的值例如red应该加上引号写成"red",否则不能显示。

    <body>

    <button id="btn1">变高</button>

    <button id="btn2">变宽</button>

    <button id="btn3">变背景</button>

    <button id="btn4">变字体大小</button>

    <button id="btn5">还原</button>

    <div id="div1">Hello World </div>

    <script>

    div1=document.getElementById('div1');

    btn1=document.getElementById('btn1');

    btn2=document.getElementById('btn2');

    btn3=document.getElementById('btn3');

    btn4=document.getElementById('btn4');

    btn5=document.getElementById('btn5');

    btn1.onclick=function(){

    div1.style.height='200px';

    };

    btn2.onclick=function(){

    div1.style.width='200px';

    };

    btn3.onclick=function(){

    div1.style.backgroundColor="blue";

    };

    btn4.onclick=function(){

    div1.style.fontSize='50px';

    };

    btn5.onclick=function(){

    div1.style.height= "100px";

    div1.style.width="100px";

    div1.style.backgroundColor= "red";

    div1.style.color= "greenyellow";

    div1.style.fontSize= "20px";

    };

    </script>

    </body>

     

    效果如下:

    除还原按钮以外依次点击后效果

  • 相关阅读:
    topcoder srm 681 div1
    topcoder srm 683 div1
    topcoder srm 684 div1
    topcoder srm 715 div1
    topcoder srm 685 div1
    topcoder srm 687 div1
    topcoder srm 688 div1
    topcoder srm 689 div1
    topcoder srm 686 div1
    topcoder srm 690 div1 -3
  • 原文地址:https://www.cnblogs.com/bonly-ge/p/6757705.html
Copyright © 2011-2022 走看看