JavaScript onclick事件使用方法详解


Posted in Javascript onMay 15, 2020

onclick是一个事件,当事件被触发时就会执行处理,onclick是一个处理鼠标点击的事件。本篇文章就给大家分享关于JavaScript中onclick事件的用法。

JavaScript onclick事件使用方法详解

我们首先来看一下onclick事件的语法

以下是如何使用onclick事件编写。

使用document.getElementById()在文档中指定id元素,并使用function(){}处理单击该元素时发生的事件。

document.getElementById("button").onclick = function() {
 // 设置在此处单击#button时要发生的事件
};

我们来看具体的示例

以下是使用onclick事件的示例。

单击按钮时更改文字

HTML代码

<div><p>点击</p></div>

CSS代码

#text-button {
 display: block;
 cursor: pointer;
 width: 160px;
 text-align: center;
 border: 1px solid #232323;
}

JavaScript代码

document.getElementById("text-button").onclick = function() {
document.getElementById("text").innerHTML = "我点击了!";
};

浏览器上显示结果如下

JavaScript onclick事件使用方法详解

当点击这个方框后,就会显示如下效果:方框中文字改变了

JavaScript onclick事件使用方法详解

点击方框时,方框背景颜色改变

HTML代码

<div id="square-button"></div>

CSS代码

#square-button {
 width: 80px;
 height: 80px;
 background: #232323;
}
#square-button.blue {
 background: #21759b;
}
JavaScript代码
 
document.getElementById("square-button").onclick = function() {
 this.classList.toggle("blue");
};

浏览器上显示如下效果:是一个黑色的方框

JavaScript onclick事件使用方法详解

当点击这个方框后,颜色就会改变,显示效果如下

JavaScript onclick事件使用方法详解

显示表单中输入的内容

HTML代码

<p>你叫什么名字?</p>
<input type="text" id="name">
<button type="button" id="form-button">输入</button>
<div id="form-text"></div>

CSS代码

:focus {
 outline: 1px solid #666;
}
input[type="text"] {
 margin: 0 0 15px;
 padding: 8px 10px;
 border: 1px solid #d0d1d3;
}
button {
 padding: 8px 15px;
 background: #979380;
 color: #fff;
 border: none;
}

JavaScript代码

document.getElementById("form-button").onclick = function() {
 document.getElementById("form-text").innerHTML = "你好 " + document.getElementById("name").value + " 同学!";
}

浏览器上显示效果如下

JavaScript onclick事件使用方法详解

当你在文本框中输入一个名字,比如张三,然后点击输入将会显示如下效果

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jquery增加时编辑jqGrid(实例代码)
Nov 08 Javascript
根据当前时间在jsp页面上显示上午或下午
Aug 18 Javascript
jquery引用方法时传递参数原理分析
Oct 13 Javascript
谈谈基于iframe、FormData、FileReader三种无刷新上传文件的方法
Dec 03 Javascript
javascript对象的相关操作小结
May 16 Javascript
Jquery获取当前城市的天气信息
Aug 05 Javascript
webpack学习笔记之优化缓存、合并、懒加载
Aug 24 Javascript
利用ECharts.js画K线图的方法示例
Jan 10 Javascript
Vue中的Props(不可变状态)
Sep 29 Javascript
简单了解JavaScript异步
May 23 Javascript
element中el-container容器与div布局区分详解
May 13 Javascript
JavaScript 异步时序问题
Nov 20 Javascript
Vue使用富文本编辑器Vue-Quill-Editor(含图片自定义上传服务、清除复制粘贴样式等)
May 15 #Javascript
用Angular实现一个扫雷的游戏示例
May 15 #Javascript
Node.js API详解之 dns模块用法实例分析
May 15 #Javascript
关于vue3默认把所有onSomething当作v-on事件绑定的思考
May 15 #Javascript
js实现简单贪吃蛇游戏
May 15 #Javascript
Javascript执行流程细节原理解析
May 14 #Javascript
使用npm命令提示: 'npm' 不是内部或外部命令,也不是可运行的程序的处理方法
May 14 #Javascript
You might like
CakePHP框架Model函数定义方法示例
2017/08/04 PHP
PHP 实现缩略图
2021/03/09 PHP
基于jquery的finkyUI插件与Ajax实现页面数据加载功能
2010/12/03 Javascript
js实现翻页后保持checkbox选中状态的实现方法
2012/11/03 Javascript
密码强度检测效果实现原理与代码
2013/01/04 Javascript
node.js中的fs.truncate方法使用说明
2014/12/15 Javascript
javascript实现获取字符串hash值
2015/05/10 Javascript
jQuery中常用的遍历函数用法实例总结
2015/09/01 Javascript
如何实现移动端浏览器不显示 pc 端的广告
2015/10/15 Javascript
NodeJS的Promise的用法解析
2016/05/05 NodeJs
基于jquery插件实现拖拽删除图片功能
2020/08/27 Javascript
基于jQuery实现中英文切换导航条效果
2016/09/18 Javascript
浅谈javascript中的三种弹窗
2016/10/21 Javascript
js实现的简练高效拖拽功能示例
2016/12/21 Javascript
js设置文字颜色的方法示例
2016/12/30 Javascript
thinkphp标签实现bootsrtap轮播carousel实例代码
2017/02/19 Javascript
vue + socket.io实现一个简易聊天室示例代码
2017/03/06 Javascript
AngularJS实现的select二级联动下拉菜单功能示例
2017/10/25 Javascript
Vue 中文本内容超出规定行数后展开收起的处理的实现方法
2019/04/28 Javascript
Vue动态修改网页标题的方法及遇到问题
2019/06/09 Javascript
layui内置模块layim发送图片添加加载动画的方法
2019/09/23 Javascript
编写Python脚本批量下载DesktopNexus壁纸的教程
2015/05/06 Python
Python中对数组集进行按行打乱shuffle的方法
2018/11/08 Python
python实现输入的数据在地图上生成热力图效果
2019/12/06 Python
pytorch GAN伪造手写体mnist数据集方式
2020/01/10 Python
python opencv实现信用卡的数字识别
2020/01/12 Python
什么是Python中的匿名函数
2020/06/02 Python
Python轻量级web框架bottle使用方法解析
2020/06/13 Python
python的数学算法函数及公式用法
2020/11/18 Python
唤醒头发毛囊的秘密武器:Grow Gorgeous
2016/08/28 全球购物
社区交通安全实施方案
2014/03/22 职场文书
实习生评语
2014/04/26 职场文书
2015驻村干部工作总结
2015/04/07 职场文书
linux下导入、导出mysql数据库命令的实现方法
2021/05/26 MySQL
MySQL快速插入一亿测试数据
2021/06/23 MySQL
Django REST framework 限流功能的使用
2021/06/24 Python