<!DOCTYPE HTML>
<html>
<head>
    <meta http-equiv="txttent-Type" txttent="text/html; charset=utf-8" />
    <title>javascript</title>
    <style type="text/css">
        body{font-size:12px;}
        #txt{
            height:400px;
            width:600px;
            border:#333 solid 1px;
            padding:5px;}
        p{
            line-height:18px;
            text-indent:2em;}
    </style>
</head>
<body>
<h2 id="con">JavaScript课程</H2>
<div id="txt">
    <h5>JavaScript为网页添加动态效果并实现与用户交互的功能。</h5>
    <p>1. JavaScript入门篇，让不懂JS的你，快速了解JS。</p>
    <p>2. JavaScript进阶篇，让你掌握JS的基础语法、函数、数组、事件、内置对象、BOM浏览器、DOM操作。</p>
    <p>3. 学完以上两门基础课后，在深入学习JavaScript的变量作用域、事件、对象、运动、cookie、正则表达式、ajax等课程。</p>
</div>
<form>
    <!--当点击相应按钮，执行相应操作，为按钮添加相应事件-->
    <input type="button" value="改变颜色" onclick="set.changeColor()">
    <input type="button" value="改变宽高" onclick="set.changeSize()">
    <input type="button" value="隐藏内容" onclick="set.objHide()">
    <input type="button" value="显示内容" onclick="set.objShow()">
    <input type="button" value="取消设置" onclick="set.offSet()">
</form>
<script type="text/javascript">
    var txt=document.getElementById("txt");
    var set={
        changeColor:function(){
            txt.style.color="red";
            txt.style.backgroundColor="#ccc";
        },
        changeSize:function(){
            txt.style.width="300px";
            txt.style.height="300px";
        },
        objHide:function(){
            txt.style.display="none";
        },
        objShow:function(){
            txt.style.display="block";
        },
        offSet:function(){
            var message=confirm("你确定要重置所有设置么？");
            if(message==true){
                txt.removeAttribute('style');
            }
        }
    }
</script>
</body>
</html>

函数实现多个按钮控制一个div的更多相关文章

  1. jquery怎么实现点击一个按钮控制一个div的显示和隐藏

    示例html 1 2 <div class="abc" style="display:none"></div> <input ty ...

  2. 用css控制一个DIV画图标。

    在实际开发中,我们会用到一些小图形,图标.大多数情况下都是用图片来实现的,同时对图片进行处理使图片大小尽可能的缩小.但是图片在怎么处理也是按KB来算的.但是要是用CSS画,只要用很少的空间就能完成同样 ...

  3. 原生JS实现点击一个按钮显示一个div，再点击按钮div隐藏，或点击除div外其它空白处div隐藏

    <!DOCTYPE html> <html style="font-size: 24px"> <head> <title>js点击按 ...

  4. jquery 文字滚动大全 scroll 支持文字或图片 单行滚动 多行滚动 带按钮控制滚动

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  5. 一个 div 手写红绿灯- 分别用css3 和 js 实现

    [要求] 一个div,配合 css3 或者 js 实现红绿灯切换的效果. [思路] 使用 css3,要实现红绿灯颜色的变换必然要用到 animation 动画,通过 keyframes 控制颜色的渐变 ...

  6. SAM4E单片机之旅——6、LED闪烁之按钮控制

    现在试试用按钮控制LED灯……让LED在一个按钮按下时亮起:弹起时灭掉. 主要目的是学习GPIO的输入及中断. 一. 电路 图中的J39-n是几个跳线插座,位置在开发板LCD附近,往下进行前要先确保跳 ...

  7. 一个div,包含两个div,调整文字位置和div平均分布

    网页中经常会用到,一个div下平均分布两个小的div,两个小的div,显示的内容为图片还比较好处理,显示文字则不好控制效果,今天写了一个如图效果的 html: <div class=" ...

  8. 【转】一个DIV+CSS代码布局的简单导航条

    原文地址:http://www.divcss5.com/shili/s731.shtml 简单的DIV CSS代码布局实现导航条 一个蓝色主题的导航条布局案例,本CSS小实例,采用DIV CSS实现. ...

  9. 使一个div始终显示在页面中间

    使一个div始终显示在页面中间 假设我们有一个div层:<div id=”myDiv”></div> 首先,我们用css来控制它在水平上始终居中,那么我们的css代码应该是这样 ...

随机推荐

  1. 初步学习pg_control文件之十三

    接前文,初步学习pg_control文件之十二 看这个: * backupStartPoint is the redo pointer of the backup start checkpoint, ...

  2. 4368: [IOI2015]boxes纪念品盒

    4368: [IOI2015]boxes纪念品盒 链接 分析 链接 代码 #include<bits/stdc++.h> using namespace std; typedef long ...

  3. 纯原生仿ES6的Object.assign，实现深度合并对象

    源码: function isObj(x){ var type = typeof x; return x !== null && (type === 'object' || type ...

  4. Java日志（一）：log4j与.properties配置文件

    日志是应用软件中不可缺少的部分,Apache的开源项目log4j是一个功能强大的日志组件,提供方便的日志记录,在Apache网站jakarta.apache.org/log4j可以免费下载到Log4j ...

  5. Jenkins - 持续集成部署

    1. 安装svn:用于checkout源码 (1)yum 安装:yum -y install subversion (2)查看svn版本信息:svnserver --version 2. 安装jdk ...

  6. C++ STL容器——stack用法介绍

    stack是一种容器适配器,专门设计用于在LIFO上下文中操作(后进先出),其中元素仅从容器的一端插入和删除. 容器适配器,而不是一种容器. 它是容器适配器是指,只要支持一系列方法的容器(empty, ...

  7. CentOS环境安装JDK(二)

    安装JDK-7u79-linux-x64 打开虚拟机,进入终端: 1.假设用户名是tianjiale(则需要进入管理员角色,既root) (1).将用户名tianjiale添加到sudoer列表中 提 ...

  8. 关于2018年东南大学Robomaster算法组工作的总结

    笔者在写作时,为东南大学机器人俱乐部下Robomaster大赛SUPER NOVA战队算法组的负责人之一(这名字写起来好长).而SUPER NOVA战队则于2018年5月19日正式结束了中部分区赛,获 ...

  9. LINQ学习笔记——（3）基本查询操作符

    Select() 作用于uIEnumerable<TSource>类型 public static void Test() { List<string> persons = n ...

  10. BZOJ 2597 剪刀石头布（最小费用最大流）（WC2007）

    Description 在一些一对一游戏的比赛(如下棋.乒乓球和羽毛球的单打)中,我们经常会遇到A胜过B,B胜过C而C又胜过A的有趣情况,不妨形象的称之为剪刀石头布情况.有的时候,无聊的人们会津津乐道 ...