<!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. Android Stadio 指定文件打开类型

    我们项目里面,有一个文件,叫做aaa.meta. 这个只是一个配置文件,里面是txt. 但是Android Stadio 不识别.怎么办? 设置如下图: 首先,打开Android stadio 的设置 ...

  2. PRO*C 函数事例 1 -- 数据库连接、事务处理

    1.程序结构        每一个Pro*C程序都包括两部分:(1)应用程序首部:(2)应用程序体        应用程序首部定义了ORACLE数据库的有关变量, 为在C语言中操纵ORACLE数据库做 ...

  3. spring mvc 返回xml格式数据

    1.问题 : 因为业务需要,需要发送xml格式的数据,使用spring mvc 自己解析,就不用费心去自己搞这些东西. 2.解决: 新建一个实体类,直接在实体类中添加注解即可,如下: @XmlRoot ...

  4. CSP201512-1: 数位之和

    引言:CSP(http://www.cspro.org/lead/application/ccf/login.jsp)是由中国计算机学会(CCF)发起的"计算机职业资格认证"考试, ...

  5. 分布式一致性算法之Paxos原理剖析

    概述 Zookeeper集群中,只有一个节点是leader节点,其它节点都是follower节点(实际上还有observer节点,不参与选举投票,在这里我们先忽略,下同).所有更新操作,必须经过lea ...

  6. Python目录链接

    第1章 就这么愉快的开始吧 课时1:我和python的第一次亲密接触 一.Python3的下载与安装 二.从IDIE启动Python 三.尝试点新的东西 四.为什么会这样? 五.课时01课后习题及答案 ...

  7. Mapper的方式总结

    Mapper的方式总结: <mappers> <!-- 通过package元素将会把指定包下面的所有Mapper接口进行注册 --> <package name=&quo ...

  8. 网络流——poj1273（入门）

    题目链接:排水沟 题意:现有n个排水沟和m个点(其中1是源点,m是汇点),给定n个排水沟所连接的点,求从源点到汇点的最大流量. [EK解法] #include <algorithm> #i ...

  9. [boost-2] 智能指针

    boost库学习: 智能指针: shared_ptr指针,定义在boost::shared_ptr,如果开发环境支持的话,可以使用memory中的std::shared_ptr. shared_ptr ...

  10. OpenCV平滑处理示例代码

    #include<cv.h> #include<highgui.h> int main(int argc, char** argv) { IplImage* img = cvL ...