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>

     

    效果如下:

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

  • 相关阅读:
    linux 鼠标中键粘帖功能?!!
    mysql 学习笔记(一)
    log4j的使用 与 父接口 slf4j 门面模式(外观模式)
    web.xml 配置 文章汇总
    2019.08.04 新建随笔
    spring-事务的七个传播行为,最近想出去面试,了解一下框架知识
    20190710 tomcat下的项目导入到eclipse中
    20190709 关于web.xml中webAppRootKey的解释
    20160624 策略模式
    20190616 IDEA-每次修改JS文件都需要重启Idea才能生效解决方法
  • 原文地址:https://www.cnblogs.com/bonly-ge/p/6757705.html
Copyright © 2011-2022 走看看