JavaScript onclick事件使用方法詳解
onclick是一個(gè)事件,當(dāng)事件被觸發(fā)時(shí)就會(huì)執(zhí)行處理,onclick是一個(gè)處理鼠標(biāo)點(diǎn)擊的事件。本篇文章就給大家分享關(guān)于JavaScript中onclick事件的用法。
我們首先來看一下onclick事件的語法
以下是如何使用onclick事件編寫。
使用document.getElementById()在文檔中指定id元素,并使用function(){}處理單擊該元素時(shí)發(fā)生的事件。
document.getElementById("button").onclick = function() { // 設(shè)置在此處單擊#button時(shí)要發(fā)生的事件 };
我們來看具體的示例
以下是使用onclick事件的示例。
單擊按鈕時(shí)更改文字
HTML代碼
<div><p>點(diǎn)擊</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 = "我點(diǎn)擊了!"; };
瀏覽器上顯示結(jié)果如下
當(dāng)點(diǎn)擊這個(gè)方框后,就會(huì)顯示如下效果:方框中文字改變了
點(diǎn)擊方框時(shí),方框背景顏色改變
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"); };
瀏覽器上顯示如下效果:是一個(gè)黑色的方框
當(dāng)點(diǎn)擊這個(gè)方框后,顏色就會(huì)改變,顯示效果如下
顯示表單中輸入的內(nèi)容
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 + " 同學(xué)!"; }
瀏覽器上顯示效果如下
當(dāng)你在文本框中輸入一個(gè)名字,比如張三,然后點(diǎn)擊輸入將會(huì)顯示如下效果
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
- JavaScript?onclick點(diǎn)擊事件-點(diǎn)擊切換圖片且自動(dòng)播放
- JavaScript onclick 和 click 的區(qū)別詳解
- JavaScript中click和onclick本質(zhì)區(qū)別與用法分析
- JS addEventListener()和attachEvent()方法實(shí)現(xiàn)注冊事件
- js中addEventListener()與removeEventListener()用法案例分析
- JavaScript使用addEventListener添加事件監(jiān)聽用法實(shí)例
- Javascript 的addEventListener()及attachEvent()區(qū)別分析
- JavaScript onclick與addEventListener使用的區(qū)別介紹
相關(guān)文章
javascript模擬實(shí)現(xiàn)計(jì)算器
這篇文章主要為大家詳細(xì)介紹了javascript模擬實(shí)現(xiàn)計(jì)算器,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2021-04-04JavaScript 手動(dòng)實(shí)現(xiàn)instanceof的方法
instanceof運(yùn)算符用于檢測構(gòu)造函數(shù)的prototype屬性是否出現(xiàn)在某個(gè)實(shí)例對象的原型鏈上,本文重點(diǎn)給大家介紹JavaScript手動(dòng)實(shí)現(xiàn)instanceof的問題,感興趣的朋友跟隨小編一起看看吧2021-10-10javascript檢查瀏覽器是否已經(jīng)啟用XX功能
本文給大家分享的是檢測瀏覽器是否支持cookie功能,檢查瀏覽器是否已經(jīng)啟用Java支持功能以及獲取當(dāng)前瀏覽器的信息,十分的實(shí)用,有需要的小伙伴可以參考下。2015-07-07uni.getLocation和wx.getLocation方法調(diào)用無效也不返回失敗的解決方案
這篇文章主要給大家介紹了關(guān)于uni.getLocation和wx.getLocation方法調(diào)用無效也不返回失敗的解決方案,文中通過實(shí)例代碼以及圖文介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2023-04-04BootStrap與validator 使用筆記(JAVA SpringMVC實(shí)現(xiàn))
這篇文章主要介紹了BootStrap與validator 使用筆記(JAVA SpringMVC實(shí)現(xiàn))的相關(guān)資料,非常不錯(cuò),具有參考借鑒價(jià)值,需要的朋友可以參考下2016-09-09js 原生判斷內(nèi)容區(qū)域是否滾動(dòng)到底部的實(shí)例代碼
下面筆者就為大家分享一篇js 原生判斷內(nèi)容區(qū)域是否滾動(dòng)到底部的實(shí)例代碼,具有很好的參考價(jià)值,希望對大家有所幫助2017-11-11- 這篇文章主要介紹了JS實(shí)現(xiàn)左邊列表移到到右邊列表功能,實(shí)現(xiàn)功能主要是左邊的下拉框內(nèi)容添加到右邊的下拉框,支持多選移動(dòng),且同時(shí)將右邊的下拉框?qū)ο笠瞥枰呐笥芽梢詤⒖枷?/div> 2018-03-03
javascript對數(shù)組的常用操作代碼 數(shù)組方法總匯
js下數(shù)組也是比較常用的,對數(shù)組元素的處理也是有非常多的方法,這里整理了下,需要的朋友可以參考下。2011-01-01最新評論