if 函数的实现步骤:

  1. function +名字()
  2. 指定id , 指定开关(display: none or block)
  3. if + else 构成逻辑 控制开关

  1. 决定在哪里安置一个灯泡, 指定一个id给某个标签
  2. 把开关用电线连着灯泡, 安装开关
    #+id名称{ 属性1= 赋值, 属性 2 = 赋值 , 属性3 = 赋值 }

    所有的赋值都可以成为一个开关. 如果是一个手动版的, 这里已经完成了. 更改属性的赋值就可以变更id的样式
  3. 帮开关装上感应元件, 一旦有动静, 开关便自动switch     建立function showhide() { 使用if+else语句, 改变开关的接线:改变属性赋值 }
  4. 打开电制, 让开关通电.     事件动作接上函数

 

最核心的原则就是, 事件动作对接函数, 函数对接属性(一个或多个)更改, 属性更改, 对接id或者class, id 或class对接事件动作所在标签

 

 

 

<style>

#div1 {width:100px; height:200px; background:#CCC; display:none;}

</style>

<script>

function showHide()

{

    var oDiv=document.getElementById('div1');

    

    if(oDiv.style.display=='block')

    {

        oDiv.style.display='none';

    }

    else

    {

        oDiv.style.display='block';

    }

}

</script>

 

 

<input
type="button" value="显示隐藏" onclick="showHide()">
</input>

<div
id="div1">

JS之 if语句函数 对接事件动作 函数更改css css对接需要换妆的区id或class的更多相关文章

  1. 前端(十二)—— JavaScript基础操作:if语句、for循环、while循环、for...in、for...of、异常处理、函数、事件、JS选择器、JS操作页面样式

    JavaScript基础操作 一.分支结构 1.if语句 if 基础语法 if (条件表达式) { 代码块; } // 当条件表达式结果为true,会执行代码块:反之不执行 // 条件表达式可以为普通 ...

  2. 前端基本知识(四):JS的异步模式:1、回调函数;2、事件监听;3、观察者模式;4、promise对象

    JavaScript语言将任务的执行模式可以分成两种:同步(Synchronous)和异步(Asychronous). “同步模式”就是一个任务完成之后,后边跟着一个任务接着执行:程序的执行顺序和排列 ...

  3. js进阶 12-14 jquery的事件触发函数是哪两个

    js进阶 12-14 jquery的事件触发函数是哪两个 一.总结 一句话总结:trigger和triggerHandler 1.trigger传额外参数时候的注意事项是什么? 注意样例中是三个参数 ...

  4. js事件绑定函数

    js中事件绑定方法大致有三种: 1.在DOM元素中绑定 <input onclick="alert('在DOM中绑定')" type="button" v ...

  5. JS中事件绑定函数,事件捕获,事件冒泡

    1 事件绑定:事件与函数绑定以及怎么取消绑定 1.1 元素.onclick这种形式,如下: <div id="div1">aaa</div> <scr ...

  6. js立即执行函数应用--事件绑定

    js中立即执行函数的应用:应用到事件绑定上. 少说多做,直接运行代码(代码中有注释): <!DOCTYPE html> <html lang="zh"> & ...

  7. JS+Zero Clipboard swf复制到剪贴板 兼容浏览器(bind事件绑定函数)

    转自http://www.ipmtea.net/css_ie_firefox/201107/07_499.html 1.ZeroClipboard其实是国外的一个js类库,源码结构如: var Zer ...

  8. JS中函数与事件

    一.函数: 1.函数就是一个工具,通过一小段代码,完成某个功能: 2.函数的定义: function 函数名(){ ..... } 或者 : var 函数名 = function(){ ...... ...

  9. js进阶 14 jquery的ajax有哪些函数和事件(多练)

    js进阶 14 jquery的ajax有哪些函数和事件(多练) 一.总结 一句话总结:常用:load.ajax.post.get.getScript().getJSON().表单序列化,ajax事件这 ...

随机推荐

  1. ElasticSearch 系列随笔

    1.ElasticSearch 常用设置 2.ElasticSearch 从2.2升级到6.2.4碰到的问题 3.ElasticSearch 因为磁盘空间不够引起的数据插入错误.(message [C ...

  2. 【转载】MDX Step by Step 读书笔记(四) - Working with Sets (使用集合)

    1. Set  - 元组的集合,在 Set 中的元组用逗号分开,Set 以花括号括起来,例如: { ([Product].[Category].[Accessories]), ([Product].[ ...

  3. Java NIO学习与记录(一):初识NIO

    初识 工作中有些地方用到了netty,netty是一个NIO框架,对于NIO却不是那么熟悉,这个系列的文章是我在学习NIO时的一个记录,也期待自己可以更好的掌握NIO. 一.NIO是什么? 非阻塞式I ...

  4. Flask-mail 发邮件慢(即使异步)

    Flask-mail 发邮件慢(即使异步) 一开始,按照狗书上的代码异步发邮件,但是发现原本响应只需要150ms的页面加了邮件发送就变成了5s响应(这怕不是假异步) 狗书的异步发邮件代码: def s ...

  5. dede两个后台共用一个数据库会出现的问题

    共用数据库内容页图片问题 在include/extend.func.php里面加上 function replaceurl($newurl) { $newurl=str_replace('src=&q ...

  6. vSphere通过Client创建Centos7主机

    准备: vSphere Client 客户端 Centos7官方镜像,本次采用的是CentOS-7-x86_64-Minimal-1511.iso 创建过程: 1.登录vSphere虚拟主机,输入账户 ...

  7. JDBC处理可滚动的处理集

    Statement createStatement(int resultSetType,                           int resultSetConcurrency,     ...

  8. Zip文件格式

    Overview This document describes the on-disk structure of a PKZip (Zip) file. The documentation curr ...

  9. javascript中的function 函数名(){} 和 函数名:function(){}有什么不同

    function functionName(){};这是定义一个函数 functionName:function(){};是设置一个对象的方法. 下面举一个例子: <html> <h ...

  10. chrome bookmarks location

    .config/google-chrome/Default file: Bookmarks