前端教程：在HTML文件放置JavaScript

HTML文档中的任何地方可包括JavaScript代码。但也有以下的最佳方法来包含JavaScript在HTML文件。

在 <head>...</head> 部分。

在 <body>...</body> 部分。

在<body>...</body> 和<head>...</head> 部分。

脚本和外部文件，然后包括在<head>... </ head>部分。

在下面的章节中，我们将看到如何可以包含JavaScript方式的不同：

在JavaScript的<head>... </ head>部分：

如果你想在一些事件上运行一个脚本，当用户点击某个地方，如，那么应该脚本的头部，如下所示：

<html>
<head>
<script type="text/javascript">
<!--
function sayHello() {
   alert("Hello World")
}
//-->
</script>
</head>
<body>
<input type="button" onclick="sayHello()" value="Say Hello" />
</body>
</html>
123456789101112131415复制代码类型：[javascript]

这将产生以下结果：

JavaScript在<body>... </ body>部分：

如果需要一个脚本的页面加载，以便脚本生成页面内容来运行，该脚本在文档的<body>部分。在这种情况下，就不必使用JavaScript定义的所有功能：

<html>
<head>
</head>
<body>
<script type="text/javascript">
<!--
document.write("Hello World")
//-->
</script>
<p>This is web page body </p>
</body>
</html>
12345678910111213复制代码类型：[javascript]

JavaScript 在<body> 和 <head> 部分:

你可以把JavaScript代码在<head>和<body>部分完全如下：

<html>
<head>
<script type="text/javascript">
<!--
function sayHello() {
   alert("Hello World")
}
//-->
</script>
</head>
<body>
<script type="text/javascript">
<!--
document.write("Hello World")
//-->
</script>
<input type="button" onclick="sayHello()" value="Say Hello" />
</body>
</html>12345678910111213141516171819复制代码类型：[javascript]

在JavaScript外部文件：

当开始工作，更广泛地使用JavaScript，可能会发现有情况下，在站点的多个页面重用相同的JavaScript代码。

你并不局限于将保持在多个HTML文件相同的代码。 script标签提供了一种机制，允许存储JavaScript在外部文件中，然后将其包含到HTML文件。

下面是一个例子来说明如何使用脚本标记和src属性包含在HTML代码的外部JavaScript文件：

<html>
<head>
<script type="text/javascript" src="filename.js" ></script>
</head>
<body>
.......
</body>
</html>

12345678910复制代码类型：[javascript]

使用JavaScript从外部文件源，则需要使用扩展写下所有的JavaScript代码在一个简单的文本文件“.js”，然后包括文件，如上图所示。

例如，你可以保持在以下文件filename.js的内容，然后包括filename.js文件后，在HTML文件中使用sayHellofunction：

function sayHello() {
   alert("Hello World")
}

开课吧广场-人才学习交流平台

HTML 中，通过 JavaScript 来获取当前元素的高度通常使用以下属性：

var element = document.getElementById("yourElementId"); // 获取元素var height = element.offsetHeight; // 获取元素高度（包括padding、border，但不包括margin）

如果你想获取元素的 CSS 定义的高度（不包括 padding 和 border），可以使用 style.height，但这只能获取到直接写在元素行内样式中的高度，而不是计算后的实际高度或 CSS 样式表中定义的高度：

var heightInStyle = element.style.height; // 只获取行内样式设置的高度

在 React 中获取当前元素的高度方式与 JavaScript 相似，但是你需要确保在 DOM 更新后获取元素高度。可以使用 ref 来访问实际 DOM 节点并获取其高度：

import React, { useRef, useEffect } from 'react';function YourComponent() {  const elementRef = useRef(null);  useEffect(() => {    if (elementRef.current) {      // 在这里，elementRef.current.clientHeight 获取元素的内容区域高度（不包括padding和border）      // elementRef.current.offsetHeight 获取元素的实际渲染高度（包括padding和border，但不包括margin）      console.log('Element height:', elementRef.current.offsetHeight);
    }
  }, []); // 确保此useEffect只在组件挂载后执行一次  return (    <div ref={elementRef}>
      {/* 你的组件内容 */}    </div>
  );
}export default YourComponent;

在上述代码中，useRef 创建了一个可变的引用对象，它可以用来保存任何可变值，包括 DOM 节点。然后通过将这个 ref 对象赋给元素的 ref 属性，React 会将对应的 DOM 节点保存到这个 ref 对象的 .current 属性上，这样我们就可以在回调函数或者其他适当的地方访问到该 DOM 节点，并获取其高度了。

如果要在图片加载完成后获取包含图片的元素高度，可以监听图片的 load 事件。在 React 中，你可以在组件内创建一个图片引用，并在 useEffect 中监听图片加载完成：

import React, { useRef, useEffect } from 'react';function YourComponent() {  const elementRef = useRef(null);  const imgRef = useRef(null);  useEffect(() => {    const handleImageLoad = () => {      if (elementRef.current) {        console.log('Element height after image load:', elementRef.current.offsetHeight);
      }
    };    // 如果img已经存在于DOM中，则立即触发handleImageLoad    // 否则，在img加载完成后触发handleImageLoad    if (imgRef.current && imgRef.current.complete) {      handleImageLoad();
    } else {
      imgRef.current.onload = handleImageLoad;
    }    // 可以选择在组件卸载时清除事件监听，避免内存泄漏    return () => {
      imgRef.current.onload = null;
    };
  }, []); // 确保此useEffect只在组件挂载后执行一次  return (    <div ref={elementRef}>      <img src="your-image-source.jpg" ref={imgRef} alt="Your Image" />
      {/* 其他内容 */}    </div>
  );
}export default YourComponent;

这样，当图片加载完成后，就会触发 handleImageLoad 函数，从而获取到包含图片的元素的实际高度。

如果图片是服务端渲染的，并且你无法直接在 img 标签上添加 ref，你可以考虑监听整个组件的 onLoad 事件来判断图片是否加载完成。由于 React 在浏览器中重新渲染时会保留 DOM 节点（除非有更改），所以可以通过检查元素的 offsetHeight 是否有变化来判断图片是否加载完毕。

前在网页切图的时候，会觉得css如果能有变量逻辑这些会很方便，它来了，less.js插件可以使得css有类似变量的语法，它不是很新的技术，习惯用它的人会觉得很好用，而且它可以直接像jquery一样直接在网页上引用，也可以体验，不过仅仅适合体验，这种直接引用的方式不适合正式情况下用，因为页面js会有一个执行的时间，所以看起来会不流畅，可以在环境下开发，然后编译出来。

在HTML中，可以使用Less作为CSS预处理器来提高代码的可维护性和可复用性。以下是在HTML中使用Less的步骤：

1. 引入Less文件

在HTML文件中，使用<link>标签引入Less文件，如下所示：


<link rel="stylesheet/less" type="text/css" href="styles.less">

2. 引入Less.js

在页面的底部引入Less.js文件，如下所示：


<script src="less.min.js"></script>

3. 编写Less代码

在styles.less中编写Less代码，例如：


@font-size: 16px;
h1 {
  font-size: @font-size;
  color: red;
}

注意，在Less中使用变量需要使用@符号来声明。

4. 编译Less代码

当网页加载时，Less.js会将styles.less文件编译为CSS，并将其替换为<link>标签的href属性中的CSS文件。

通过在本地安装Less和使用命令行工具来编译Less文件，可以避免在生产环境中依赖Less.js。

在线咨询

上一篇：HTML5(六)-Canvas 高级操作
下一篇：富文本编辑器粘贴WORD内容

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。