<!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. 在WPF中自定义控件(3) CustomControl (下)

    原文:在WPF中自定义控件(3) CustomControl (下)   在WPF中自定义控件(3) CustomControl (下)                                 ...

  2. EAS集锦

    前言 之前看过的相关BOS开发文档,整理了一些常用的API,一直没有来得及放上来,现在把整理的文件放上来,以备忘查看,分享.闲话少说,上干货! ps 图片不方便查看的话,可以拖住图片,加载到浏览器新页 ...

  3. Accept 惊群现象测试perl脚本

    $uname -a Linux debian-11-34 3.16.0-4-amd64 #1 SMP Debian 3.16.7-ckt9-3~deb8u1 (2015-04-24) x86_64 G ...

  4. appium + Python + iOS 滑屏方法（appium版本大于1.5）

    之前一直在搞android的自动化,滑动操作一直都用swipe(),比如: he1 = int(dr.get_window_size()['height'] * 0.8)he2 = int(dr.ge ...

  5. Sleuth+Zipkin+Log

    https://blog.csdn.net/sqzhao/article/details/70568637 https://blog.csdn.net/yejingtao703/article/det ...

  6. 详说大数据计算的可类化Classable

    可类化(Classable)是Laxcus大数据管理系统提供的一项基础功能,它能够将类转化为一串字节数组,或者逆向将字节数组转化为一个类.这项功能与JAVA提供的序列化(Serializable)非常 ...

  7. Spark集群管理器介绍

    Spark可以运行在各种集群管理器上,并通过集群管理器访问集群中的其他机器.Spark主要有三种集群管理器,如果只是想让spark运行起来,可以采用spark自带的独立集群管理器,采用独立部署的模式: ...

  8. windows下git hub的GUI软件配置与使用

    转载自:http://www.cnblogs.com/haore147/p/3618930.html   1. 安装两个软件 1 2 1. git的命令行程序--git for windows:htt ...

  9. java文件的I/O

    [原创] java文件的I/O操作,简单来说就是向文件中写入数据以及从文件中读出数据,这是我们平日做的最多的操作,这里给出两种文件I/O操作,当然还有许多的操作方法,各种流的使用,可谓是高深莫测:不管 ...

  10. larbin之哈希之谈

    由于工作原因,打算对larbin的源码进行分析一番 用的是2.6.3版本的larbin源码,由于这是业余,会断断续续的分析上传,已做记录笔记 今天我们分析一下larbin的哈希表 这个哈希表结构比较简 ...