📅 最后修改于: 2023-12-03 15:22:36.077000 🧑 作者: Mango
在 Web 开发中，JavaScript 常常被用于操作网页，比如表单验证、动态改变网页结构或样式等。最常见的使用方式就是在 HTML 中嵌入内联的 JavaScript 代码。本文将介绍如何让内联 JavaScript 与 HTML 一起工作。
要在 HTML 中嵌入内联的 JavaScript 代码，可以使用 <script> 标签。该标签可以放在 <head> 或 <body> 标签中。
<!DOCTYPE html>
<html>
<head>
<title>内联 JavaScript 示例</title>
<script>
// 这里是内联 JavaScript 代码
alert('Hello, world!');
</script>
</head>
<body>
<h1>欢迎来到我的网站！</h1>
</body>
</html>
以上代码中的 <script> 标签中嵌入了一段内联的 JavaScript 代码。这段代码会在网页加载时弹出一个提示框，内容为“Hello, world!”。
内联 JavaScript 通常用于操作网页内容，比如动态修改内容和样式。为了让 JavaScript 能够找到要操作的 HTML 元素，可以使用以下方式获取元素的引用。
可以通过 document.getElementById() 方法获取指定 ID 的元素引用。
<!DOCTYPE html>
<html>
<head>
<title>获取元素引用示例</title>
</head>
<body>
<h1 id="pageTitle">欢迎来到我的网站！</h1>
<p id="pageContent">这是我的个人网站，我会在这里分享一些有趣的内容。</p>
<script>
// 获取页面标题元素
var title = document.getElementById('pageTitle');
// 修改页面标题
title.innerHTML = '我的网站 - 首页';
// 获取页面内容元素
var content = document.getElementById('pageContent');
// 修改页面内容
content.innerHTML = '欢迎来到我的网站，这里有很多有趣的内容，快来看看吧！';
</script>
</body>
</html>
以上代码中，通过 document.getElementById() 方法获取了页面标题和内容的引用，并通过 innerHTML 属性修改了它们的文本内容。
可以通过 document.getElementsByTagName() 方法获取指定标签名的元素引用。该方法会返回一个元素数组，可以通过数组索引获取相应的元素引用。
<!DOCTYPE html>
<html>
<head>
<title>获取元素引用示例</title>
</head>
<body>
<h1>欢迎来到我的网站！</h1>
<ul>
<li>首页</li>
<li>博客</li>
<li>关于我</li>
</ul>
<script>
// 获取菜单元素
var menu = document.getElementsByTagName('li');
// 修改菜单样式
for (var i = 0; i < menu.length; i++) {
menu[i].style.color = 'blue';
}
</script>
</body>
</html>
以上代码中，通过 document.getElementsByTagName() 方法获取了所有菜单项的引用，并通过循环修改了它们的文本颜色为蓝色。
可以通过 document.getElementsByClassName() 方法获取指定类名的元素引用。该方法会返回一个元素数组，可以通过数组索引获取相应的元素引用。
<!DOCTYPE html>
<html>
<head>
<title>获取元素引用示例</title>
</head>
<body>
<div class="box">
<h2>这是一个盒子</h2>
<p>这是盒子里的内容。</p>
</div>
<div class="box">
<h2>这是另一个盒子</h2>
<p>这是另一个盒子里的内容。</p>
</div>
<script>
// 获取所有盒子元素
var boxes = document.getElementsByClassName('box');
// 修改盒子样式
for (var i = 0; i < boxes.length; i++) {
boxes[i].style.border = '1px solid black';
boxes[i].style.padding = '10px';
}
</script>
</body>
</html>
以上代码中，通过 document.getElementsByClassName() 方法获取了所有盒子元素的引用，并通过循环修改了它们的边框样式和内边距。
可以通过 innerHTML 或 innerText 属性修改元素的文本内容。
<!DOCTYPE html>
<html>
<head>
<title>修改元素文本内容示例</title>
</head>
<body>
<h1>欢迎来到我的网站！</h1>
<script>
// 获取页面标题元素
var title = document.getElementsByTagName('h1')[0];
// 修改页面标题
title.innerHTML = '我的网站 - 首页';
</script>
</body>
</html>
以上代码中，使用了 innerHTML 属性修改了页面标题的文本内容。
可以通过 style 属性修改元素的样式。该属性中包含了元素的所有样式选项，可以直接修改相应的选项。
<!DOCTYPE html>
<html>
<head>
<title>修改元素样式示例</title>
<style>
.box {
border: 1px solid black;
padding: 10px;
}
.box p {
font-size: 14px;
}
</style>
</head>
<body>
<div class="box">
<h2>这是一个盒子</h2>
<p>这是盒子里的内容。</p>
</div>
<script>
// 获取盒子元素
var box = document.getElementsByClassName('box')[0];
// 修改盒子样式
box.style.backgroundColor = 'yellow';
box.style.borderColor = 'blue';
box.style.borderRadius = '5px';
box.style.boxShadow = '0 0 5px #ccc';
// 获取盒子中的段落元素
var p = box.getElementsByTagName('p')[0];
// 修改段落样式
p.style.fontWeight = 'bold';
</script>
</body>
</html>
以上代码中，使用了 style 属性修改了盒子和段落的样式。注意，style 属性只能修改单个样式选项，如果要修改多个选项，必须一一设置。
内联 JavaScript 和 HTML 可以通过获取元素引用和操作元素的方式来交互。可以使用 document.getElementById()、document.getElementsByTagName() 和 document.getElementsByClassName() 方法获取元素引用，可以使用 innerHTML 或 innerText 属性修改元素的文本内容，可以使用 style 属性修改元素的样式。在实际开发中，可以根据具体的需求选择相应的操作方式。