您好,登錄后才能下訂單哦!
小編給大家分享一下JavaScript中如何使用onclick事件,希望大家閱讀完這篇文章后大所收獲,下面讓我們一起去探討吧!
onclick是一個(gè)事件,當(dāng)事件被觸發(fā)時(shí)就會(huì)執(zhí)行處理,onclick是一個(gè)處理鼠標(biāo)點(diǎn)擊的事件。
我們首先來看一下onclick事件的語法
以下是如何使用onclick事件編寫。
使用document.getElementById()在文檔中指定id元素,并使用function(){}處理單擊該元素時(shí)發(fā)生的事件。
document.getElementById("button").onclick = function() { // 設(shè)置在此處單擊#button時(shí)要發(fā)生的事件 };
我們來看具體的示例
以下是使用onclick事件的示例。
單擊按鈕時(shí)更改文字
HTML代碼
<div id="text-button"><p id="text">點(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ì)顯示如下效果
看完了這篇文章,相信你對JavaScript中如何使用onclick事件有了一定的了解,想了解更多相關(guān)知識(shí),歡迎關(guān)注億速云行業(yè)資訊頻道,感謝各位的閱讀!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。