当前位置：首页 > 行业动态 > 正文

html里加js

admin
行业动态
2025-04-26
3975

在HTML中添加JavaScript可通过内联（如 onclick="alert('Hi')"）、内部（ ...）或外部引用（` ），推荐将功能分离到外部文件以提高可维护性，并在`前加载以优化渲染速度

在HTML中添加JavaScript的方法

内联脚本（直接在HTML元素中写JS）

内联脚本通过 onclick、onmouseover 等事件属性直接写在HTML标签内,适用于简单的交互逻辑。

示例：

<button onclick="alert('按钮被点击')">点击我</button>

特点：

代码分散，不利于维护
仅适合极简逻辑，推荐用外部/内嵌脚本替代

内嵌脚本（`<script>`标签直接写在HTML中）

将JS代码放在HTML文件的 <script> 标签内，通常放在 <head> 或 <body> 末尾。

html里加js 第1张

示例：

<!DOCTYPE html>
<html>
<head>
  <script>
    // 页面加载时执行
    alert('欢迎访问本页面');
  </script>
</head>
<body>
  <h1 id="title">标题</h1>
  <script>
    // 操作DOM元素
    document.getElementById('title').style.color = 'red';
  </script>
</body>
</html>

特点：

代码集中，便于维护
建议放在 <body> 末尾，避免阻塞页面渲染

外部脚本（链接外部JS文件）

将JS代码写入独立文件（如 main.js），通过 <script src="路径"> 引入,实现代码复用。

示例：

<!DOCTYPE html>
<html>
<head>
  <script src="main.js" defer></script>
</head>
<body>
  <p id="text">原始文本</p>
</body>
</html>

外部文件（main.js）：

// 等待DOM加载完成
document.addEventListener('DOMContentLoaded', function() {
  document.getElementById('text').textContent = '文本已修改';
});

特点：

分离HTML与JS，结构清晰
支持 defer（延迟执行）或 async（异步执行）优化加载

JavaScript在HTML中的核心操作

操作类型	示例代码	说明
DOM选择	`document.getElementById('id')`	通过ID获取元素
`document.querySelector('.class')`	通过CSS选择器获取元素
事件绑定	`element.addEventListener('click', function)`	动态绑定事件，替代内联事件
	`element.textContent = '新文本'`	修改元素文本内容
样式修改	`element.style.color = 'blue'`	直接修改内联样式
创建元素	`document.createElement('div')`	动态创建新元素