1.onclick事件

<button type="button" onclick="alert('Welcome!')">点击这里</button>

<div onclick="alert('Welcome!')">点击这个div</div>

2.改变 HTML 内容

添加按钮，并调用onclick事件

<p id="demo">                           
JavaScript 能改变 HTML 元素的内容。
</p>

<script>
function myFunction()
{
x=document.getElementById("demo");  // 找到元素
x.innerHTML="Hello JavaScript!";    // 改变内容
}
</script>

<button type="button" onclick="myFunction()">点击这里</button>//设置事件触发按钮

3.图片替换

<script>
function changeImage()
{
element=document.getElementById('myimage')
if (element.src.match("图片1链接"))
  {
  element.src="图片2链接";
  }
else
  {
  element.src="图片1链接";
  }
}
</script>

<img id="myimage" onclick="changeImage()" src="图片1链接">

4.改变标签的css

<body>
  <p id="demo" style="color: black;">JavaScript 能改变 HTML 元素的样式。</p>  <!--需要改变样式的标签-->
        <script>//设置改变方法
         function myf()
         {
             x=document.getElementById("demo");
             if(x.style.color.match('black'))
             {
                x.style.color="red";
             }
             else if(x.style.color.match('red'))
             {
             x.style.color="blue"; 
             }
                else
                {
             x.style.color="black"; 
                }
         }
        </script>
        <input type="button" onclick="myf()" value="点击这里" /> <!--点击方法-->
 </body>

5.判断输入是否是数字

<body>
  <input id="demo" type="text" />
        <script>//设置改变方法
         function myf()
         {
             x=document.getElementById("demo").value;
             if(x==""||isNaN(x))       //isNaN()代表非数字
             {
              alert("输入错误");
             }
         }
        </script>
        <input type="button" onclick="myf()" value="点击这里" /> <!--点击方法-->
 </body>

<——第一节完——>

【onclick事件】【改变 HTML 内容innerHTML】【图片替换】【改变标签的css】【判断输入是否是数字】的更多相关文章

  1. 使用ajax和window.history.pushState无刷新改变页面内容和地址栏URL

    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...

  2. 使用ajax和window.history.pushState无刷新改变页面内容和地址栏URL (转)

    在访问现在很火的google plus时,细心的用户也许会发现页面之间的点击是通过ajax异步请求的,同时页面的URL发生了了改变.并且能够很好的支持浏览器的前进和后退.不禁让人想问,是什么有这么强大 ...

  3. 关于JS点击button之灵活替换改变内容方法

    <p id="demo">JavaScript 能改变 HTML 元素的内容.</p> <script>function myFunction( ...

  4. js 输出语句document.write()及动态改变元素中内容innerHTML的使用

    操作 HTML 元素 如需从 JavaScript 访问某个 HTML 元素,您可以使用 document.getElementById(id) 方法. 请使用 "id" 属性来标 ...

  5. 巧妙使用Jquery 改变元素的 onclick 事件

    需要点击图片将套组发布, 页面代码: <img width="20px" src=" <s:property value="IMAGES_PATH& ...

  6. js innerHTML 改变div内容的方法

    永远不知道你可以改变的内容,一个HTML元素?也许你要取代的文字段落中,以反映什么访客选定刚刚从下拉框中.通过操纵一个元素的innerHtml您可以变更您的文本和HTML多达你喜欢.改变文字inner ...

  7. 【Javascript】IE8兼容 背景图片与a标签的onclick事件

    先说几句牢骚话. 虽然IE8比之IE6.7有很大的进步,但是在执行效率.兼容性上仍然有很多问题.被广大开发者喜爱的平台才是好平台. 可惜多亏当年盗版XP打开中国的计算机市场,IE作为一款捆绑软件仍然在 ...

  8. TImage也有OnClick事件，可以当按钮使用，配上合适的图片（背景透明，效果前凸）更是几乎以假乱真

    本质上TImage与TSpeedButton没有什么区别,都是没有句柄的,但都可以执行OnClick事件.有空分析一下.

  9. CSS样式，雪碧，图片替换，渐变小析

    Css基础2: 相对长度单位:em,rem,px,%绝对长度单位:厘米等(不用)颜色单位:rgb,rgb的百分比,16进制(#),颜色名称字体:font-size:为了更好适合点阵,尽量使用偶数fon ...

随机推荐

  1. POJ 3522 Slim Span(极差最小生成树）

    Slim Span Time Limit: 5000MS   Memory Limit: 65536K Total Submissions: 9546   Accepted: 5076 Descrip ...

  2. 高级组件——弹出式菜单JPopupMenu

    弹出式菜单JPopupMenu,需要用到鼠标事件.MouseListener必须要实现所有接口,MouseAdapter是类,只写你关心的方法,即MouseAdapter实现了MouseListene ...

  3. maomao的每日动向

    \(2019.02.04\) \(Nothing\) \(to\) \(do\). \(2019.02.05\) - 早上睡到\(12\)点 - 中午下午:吃饭串门拜年 - 晚上:吹爆<流浪地球 ...

  4. Ajax结合Json进行交互数据(四)

    <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding= ...

  5. 5款Mac极速下载工具推荐和下载

    最近几年用到下载工具的情况其实很少了,比如几年前我们可能经常用下载工具下载视频.音乐.图书等资源,但今天的我们更多的在线看视频.在线听音乐了,偶尔用到下载的时候直接用浏览器自带的下载工具也完全够用了, ...

  6. golang 使用os/exec配合context实现的超时机制

    在使用golang开发中,调用外部可执行程序通过exec包是我们常用的方式.如何控制超时请见如下样例: var ( Timeout = 3 * time.Second ) func Command(n ...

  7. go 实现用户特权判断的例子

    需求:实现用户特权,可以满足下面1个或多个条件 红名 达人 vip会员 vip超级会员 蓝钻用户 红钻用户 1.实现方法一:可以根据数据库字段,每个特权用一个字段,进行判断缺点:每增加一个特权,要进行 ...

  8. docker swarm（当前官网示例）

    介绍 Docker Swarm 是 Docker 公司推出的官方容器集群平台,基于 Go 语言实现 作为容器集群管理器,Swarm 最大的优势之一就是 100% 支持标准的 Docker API.各种 ...

  9. Idea使用Maven创建Java Web项目

    最近学到了Java Web项目,使用Idea和Maven创建Java Web的时候遇到了诸多问题,最多的还是404问题.现在记录一下解决方案. 一.使用maven创建一个web项目,这一步网上都有,下 ...

  10. Java 读取propertoes文件

    我一直不懂,Java里面的路径是咋样的,怎么找到我的资源文件? 直到我看到了这篇文件,写的是真棒.这篇文章  看完之后,豁然开朗的感觉 下面做些笔记,首先,Java有一个targer文件,下面有一个c ...