JavaScriptonclick事件使⽤⽅法详解
onclick是⼀个事件，当事件被触发时就会执⾏处理，onclick是⼀个处理⿏标点击的事件。本篇⽂章就给⼤家分享关于JavaScript中onclick事件的⽤法。
我们⾸先来看⼀下onclick事件的语法
以下是如何使⽤onclick事件编写。
使⽤ElementById（）在⽂档中指定id元素，并使⽤function(){}处理单击该元素时发⽣的事件。ElementById("button").onclick = function() {
// 设置在此处单击#button时要发⽣的事件
};html矩形框代码怎么写
我们来看具体的⽰例
以下是使⽤onclick事件的⽰例。
单击按钮时更改⽂字
HTML代码
<div><p>点击</p></div>
CSS代码
#text-button {
display: block;
cursor: pointer;
width: 160px;
text-align: center;
border: 1px solid #232323;
}
JavaScript代码
};
浏览器上显⽰结果如下
当点击这个⽅框后，就会显⽰如下效果：⽅框中⽂字改变了
点击⽅框时，⽅框背景颜⾊改变
HTML代码
<div id="square-button"></div>
CSS代码
#square-button {
width: 80px;
height: 80px;
background: #232323;
}
#square-button.blue {
background: #21759b;
}
JavaScript代码
le("blue");
};
浏览器上显⽰如下效果：是⼀个⿊⾊的⽅框
当点击这个⽅框后，颜⾊就会改变，显⽰效果如下
显⽰表单中输⼊的内容
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代码
浏览器上显⽰效果如下
当你在⽂本框中输⼊⼀个名字，⽐如张三，然后点击输⼊将会显⽰如下效果
以上就是本⽂的全部内容，希望对⼤家的学习有所帮助，也希望⼤家多多⽀持。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。