1 <!DOCTYPE html> 2 <html lang="en"> 3 4 <head> 5 <meta charset="UTF-8"> 6 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 7 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 8 <title>Document</title> 9 <link rel="stylesheet" href="./style.css"> 10 <!-- <style> 11 div { 12 color: red 13 } 14 </style> --> 15 </head> 16 17 <body> 18 <h1>我是标题</h1> 19 <div>我是div1</div> 20 <div>我是div2</div> 21 22 <!-- 001-方案一，在script标签中间编写JavaScript代码 --> 23 <!-- <script type="text/javascript"> --> 24 <!-- <script> 25 //当点击div的标签的时候，设置标签的文字为蓝色 26 // 001-先通过JavaScript代码来获取标签 27 // document.getElementsByTagName("div"); 获取页面中所有的div标签 28 var oDiv = document.getElementsByTagName("div")[0]; 29 30 // 002-给标签添加点击事件 31 oDiv.onclick = function() { 32 oDiv.style.color = "blue"; 33 } 34 </script> --> 35 36 <!-- 002-方案2，把JavaScript代码编写到单独的文件中，引入执行文件 --> 37 <script src="./index.js"></script> 38 </body> 39 40 </html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="./style.css">
<!-- <style>
div {
color: red
}
</style> -->
</head>
<body>
<h1>我是标题</h1>
<div>我是div1</div>
<div>我是div2</div>
<!-- 001-方案一，在script标签中间编写JavaScript代码 -->
<!-- <script type="text/javascript"> -->
<!-- <script>
//当点击div的标签的时候，设置标签的文字为蓝色
// 001-先通过JavaScript代码来获取标签
// document.getElementsByTagName("div"); 获取页面中所有的div标签
var oDiv = document.getElementsByTagName("div")[0];
// 002-给标签添加点击事件
oDiv.onclick = function() {
oDiv.style.color = "blue";
}
</script> -->
<!-- 002-方案2，把JavaScript代码编写到单独的文件中，引入执行文件 -->
<script src="./index.js"></script>
</body>
</html>