<!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. Python3 os模块&sys模块&hashlib模块

    ''' os模块 非常重要的模块 ''' import os # print(os.getcwd()) # 获取当前工作目录 # os.chdir(r'路径名') # 改变当前工作目录 # print ...

  2. AOP原理？？

    面向切面编程,在我们的应用中,经常需要做一些事情,但是这些事情与核心业务无关,比如,事务.日志.权限拦截.统一异常处理等等.Spring AOP使用了代理模式. Spring AOP底层利用两种代理模 ...

  3. git删除本地及远程分支

    1. 删除本地分支: git branch -d branchName 2. 删除远程分支: // 方法一:将删除的本地分支推到远程(要删除的远程分支在本地有映射) git push origin : ...

  4. Hibernate-ORM:03.Hibernate主键生成策略

    ------------吾亦无他,唯手熟尔,谦卑若愚,好学若饥------------- 此篇博客简单记录五种常用的主键生成策咯: 不同的主键生成策略,生成的sql语句,以及hibernate的操作都 ...

  5. git使用ssh密钥（转）

    git使用https协议,每次pull, push都要输入密码,相当的烦.使用git协议,然后使用ssh密钥.这样可以省去每次都输密码. 大概需要三个步骤:一.本地生成密钥对:二.设置github上的 ...

  6. web端常见兼容性问题整理

    一.html和css 各浏览器的默认内外边距不一致问题 最明显的是ul标签内外边距问题,ul标签在IE-7中,有个默认的外边距,但是在IE8以上及其他浏览器中有个默认的内边距. 解决办法:*{marg ...

  7. Qt 汽车仪表再次编写，Widget，仪表显示，绘制界面

    感谢某网友提供UI让我练练手,上目前的效果 还在晚上,代码等后面在贴出来,就是出来显摆一下

  8. Android之ViewPager 第二课

    在这里只粘贴部分代码 在第一课中,只有View滑动完毕,才触发动画效果,令滑块移动,在第二课中,将实现滑块与View同步运行. SecondActivity.java package com.andr ...

  9. 最短路径——Dijkstra算法以及二叉堆优化（含证明）

    一般最短路径算法习惯性的分为两种:单源最短路径算法和全顶点之间最短路径.前者是计算出从一个点出发,到达所有其余可到达顶点的距离.后者是计算出图中所有点之间的路径距离. 单源最短路径 Dijkstra算 ...

  10. esayui combotree 只能选择子节点

    esayui combotree 只能选择子节点用onBeforeSelect:参数是node,节点被选中之前触发,返回false取消选择动作. 网上找了好多都没一个可用的,要想知道他是子节点还是根节 ...