js在HTML的三種引用方式詳解
1.內聯樣式
內聯樣式分為兩種，一是直接寫入元素的標簽內部
<html> <title>js樣式內聯寫法</title> <meta http-equiv='content-type' content='text/html; charset=utf-8' /> <body> <!--js內聯寫法01開始--> <!--當鼠標點擊圖片時跳出彈窗顯示1223--> <div class='img'> 單擊事件： <img src='http://m.4tl426be.cn/bcjs/images/001.jpg' onclick='alert(1223)'></img> </div> <!--js內聯寫法01結束--> </body></html>
二是寫入到<script></script>標簽中
給元素添加id
通過getElementById(’XX’);方法定位到該元素，給該元素添加觸發事件
注意：<script></script>標簽應該放在</body>之后
<html> <title>js樣式內聯寫法</title> <meta http-equiv='content-type' content='text/html; charset=utf-8' /> <body> <!--js內聯寫法02開始--> <div class='img'> 單擊事件： <img src='http://m.4tl426be.cn/bcjs/images/002.jpg' id=’yuansu’></img> </div> <!--js內聯寫法02結束--> </body> <script> //js代碼 //找到XX元素，一般給元素加id yuansuojb=document.getElementById(’yuansu’);//給xx元素加事件 yuansuojb.onclick=function(){ //代碼段 alert(1); } //觸發事件 </script></html>
2.外聯樣式
將js的代碼寫到.js的文件中，并在HTML中引用
.html文件內容如下：
<html> <title>js樣式外聯寫法</title> <meta http-equiv='content-type' content='text/html; charset=utf-8' /> <body> <div class='img'> 外聯寫法--單擊事件： <img src='http://m.4tl426be.cn/bcjs/images/003.jpg' id=’yuansu’></img> </div> </body> <script src=’js/index.js’></script></html>
.js文件內容如下：
//js代碼//找到XX元素，一般給元素加id yuansuojb=document.getElementById(’yuansu’); //給xx元素加事件yuansuojb.onclick=function(){ //代碼段 var str='hello world !!!'; alert(str);}
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持好吧啦網。
相關文章：
1. Python 實現勞拉游戲的實例代碼（四連環、重力四子棋）2. .Net加密神器Eazfuscator.NET?2023.2?最新版使用教程3. Java GZip 基于內存實現壓縮和解壓的方法4. java獲取文件編碼,jsoup獲取html純文本操作5. 利用CSS制作3D動畫6. 一款功能強大的markdown編輯器tui.editor使用示例詳解7. 淺談Android Studio導出javadoc文檔操作及問題的解決8. 存儲于xml中需要的HTML轉義代碼9. jsp+servlet簡單實現上傳文件功能（保存目錄改進）10. python 寫函數在一定條件下需要調用自身時的寫法說明
網公網安備