整合营销服务商

电脑端+手机端+微信端=数据同步管理

免费咨询热线：

JavaScript代码怎样引入到HTML中？

avaScript 程序不能独立运行，它需要被嵌入 HTML 中，然后浏览器才能执行 JavaScript 代码。通过 <script> 标签将 JavaScript 代码引入到 HTML 中，有两种方式：
1.内部方式
内部方式是通过<script>标签包裹JavaScript代码,从而引入HTML页面中，示例代码如下：

<!DOCTYPE html>
 <html>
 <head>
   <meta charset="UTF-8">
   <title>JavaScript 基础 - 引入方式</title>
 </head>
 <body>
   <!-- 内联形式：通过 script 标签包裹 JavaScript 代码 -->
   <script>
     alert('嗨，欢迎来传智播学习前端技术！')
   </script>
 </body>
 </html>

2.外部形式

一般将 JavaScript 代码写在独立的以 .js 结尾的文件中，然后通过 <script>标签的 <src>属性引入，示例代码如下：

// demo.js
document.write('嗨，欢迎来传智播学习前端技术！')
<!DOCTYPE html>
 <html>
 <head>
   <meta charset="UTF-8">
   <title>JavaScript 基础 - 引入方式</title>
 </head>
 <body>
   <!-- 外部形式：通过 script 的 src 属性引入独立的 .js 文件 -->
   <script src="demo.js"></script>
 </body>
 </html>

注意：如果 script 标签使用 src 属性引入了某 .js 文件，那么 标签的代码会被忽略！！！如下代码所示：

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 是否有变化来判断图片是否加载完毕。

在开篇

开篇之前，先提个问题，什么是类？分类吗？可以这么说吧！我们可以给物体分类，也可以给人分类。正所谓，物以类聚，人以群分。难道我们这里是给元素分类？用分类来理解是不准确的啦！从某些角度，也可以理解成分类，说白了也就是个标识而已。废话不说，我们正式步入今晚的主题！

HTML类

html中的类是什么鬼？先上个例子，然后再剖析它：

<!DOCTYPE html>
<html lang="zh">
    <head>
        <meta charset="UTF-8">
        <title>陪你复习巩固，攻破前端技能</title>
        <style>
            .c1 {
              background-color: tomato;
              color: white;
              border: 2px solid black;
              margin: 20px;
              padding: 20px;
            }
        </style>
    </head>
    <body>
        <div class="c1">
            <h2>彩虹运维技术栈社区，公众号ID：TtrOpsStack</h2>
        </div>

        <div class="c1">
            <p>笔者亲自设计的，一个入侵性极低的Oracle监控方案</p>
            <a href="https://mp.weixin.qq.com/s/PDm2bK7IMFOwjNHFOblgXg" target="_blank">oracledb_exporter监控Oracle，一个入侵性极低的监控方案。</a>
        </div>

        <div class="c1">
            <p>意犹未尽的第2篇再次推出，一个入侵性极低的Oracle监控方案</p>
            <a href="https://mp.weixin.qq.com/s/gFeWlZRGkIMAOCNFpKm8-Q" target="_blank">意犹未尽的第2篇再次推出，继续讲解oracledb_exporter监控Oracle，一个入侵性极低的监控方案。</a>
        <div>
    </body>
</html>

效果如下图：

好了，我们正式开始对它进行剖析，搞清楚到底啥是类，上面的小栗子中，定义了3个div元素，它们的class属性值均为 "c1"。然后注意到没有？在head中的style标签里，通过 ”.c1“ 的方式同时对3个div进行了css样式的设置。所以也由此引出了它的一个特点，那就是多个HTML元素可以共享同一个类，上述的例子中3个div（元素）的类（class）名都定义了为“c1”，且同时对3个div进行了css样式的设置，这就是它的共享性。不知道笔者说明白了没有，好尴尬。

那接下来，我们再来个小栗子：

<!DOCTYPE html>
<html lang="zh">
    <head>
        <meta charset="UTF-8">
        <title>陪你复习巩固，攻破前端技能</title>
        <style>
            .c2 {
                font-size: 120%;
                color: crimson;
            }
        </style>
    </head>
    <body>
        <h1>彩虹<span class="c2">运维</span>技术栈社区</h1>
        <p>我们会<span class="c2">持续分享</span>运维和运维开发领域相关的技术文章</p>
    </body>
</html>

效果如下图：

上面的例子中，“运维”和“持续分享”这两个字都在span标签里，且这两个span标签都定义了class属性，class=“c2”，同时通过“.c2”的方式设置了CSS属性。上面的例子中，就是通过这样的办法实现了对某部分的文字进行样式的设置。

截止目前，我们通过两个小栗子，直接解剖了什么是类，那么我们再做个小总结：

  • class属性可以用于任何HTML元素
  • 类名区分大小写

CLASS的语法

其实在前面的小栗子中，已经讲解过class的语法了，不知道广大盆友们注意到了没有。如果没有注意到，咱们再这个章节重新复习一下。

看下面代码：

<!DOCTYPE html>
<html lang="zh">
    <head>
        <meta charset="UTF-8">
        <title>陪你复习巩固，攻破前端技能</title>
        <style>
            .cc3 {
              background-color: blue;
              color: white;
              padding: 8px;
            }
        </style>
    </head>
    <body>
        <h2 class="cc3">彩虹运维技术栈社区，公众号ID：TtrOpsStack</h2>
        <p class="cc3">我们会持续分享运维和运维开发领域相关的技术文章</p>
    </body>
</html>

效果如下图：

上面的例子中，是如何引用到文本内容并设置CSS属性的呢？答案就是通过.css3这样的语法，我们设置的类名是css3。然后在style中，设置css属性，在{}大括号里的内容就是CSS的属性，关于CSS，笔者后续会专门逐一讲解哈。

一个元素可以属于多个类

什么？一个元素可以属于多个类？到底怎么玩，废话不说，咱们上个例子就知道了。下面的例子，是在上一个例子的基础上进行了小改造，看下面代码：

<!DOCTYPE html>
<html lang="zh">
    <head>
        <meta charset="UTF-8">
        <title>陪你复习巩固，攻破前端技能</title>
        <style>
            .cc3 {
              background-color: blue;
              color: white;
              padding: 8px;
            }
            .css4 {
                text-align: center;
            }
        </style>
    </head>
    <body>
        <h2 class="cc3 css4">彩虹运维技术栈社区，公众号ID：TtrOpsStack</h2>
        <p class="cc3">我们会持续分享运维和运维开发领域相关的技术文章</p>
    </body>
</html>

效果如下图：

注意到这个语法了吗？class="cc3 css4"，没错了！在上面的style中，分别对同一个h2元素进行设置了不同的CSS属性。也就是说，对同一个元素需要定义多个类，用空格分隔类名就可以实现啦！是不是太简单了啦？

类的复用

什么？类的复用怎么理解？也就是说不同的元素可以共享同一个类。其实这个概念，在之前的例子中都有用到啦！只不过还没有抛出这个概念而已，下面我们来个小栗子，巩固一下。

这个例子是在上一个例子的基础上做了小改造，看下面代码：

<!DOCTYPE html>
<html lang="zh">
    <head>
        <meta charset="UTF-8">
        <title>陪你复习巩固，攻破前端技能</title>
        <style>
            .share_class {
                background-color: blue;
                color: white;
                padding: 8px;
                text-align: center;
            }
        </style>
    </head>
    <body>
        <h2 class="share_class">彩虹运维技术栈社区，公众号ID：TtrOpsStack</h2>
        <p class="share_class">我们会持续分享运维和运维开发领域相关的技术文章</p>
    </body>
</html>

效果如下图：

注意到了吗？两个元素：h2和p元素，都使用了相同的类，类名叫share_class，这就达到了复用的效果呀！

JavaScript使用class

截止目前，还没讲解到js，那么先讲个小知识点，js如何使用class的。当然，核心的用法也是使用类名为指定的元素完成一些功能，在JavaScript里是通过getElementsByClassName()方法来访问元素中的类名，反言之，也可以说是通过getElementsByClassName()方法来访问带有指定类名的元素。关于js的知识，后续笔者会一一讲解每个知识点，不急，咱们慢慢来。

下面，先来个小栗子，这例子很简单，通过js实现点击后隐藏h2和p元素的内容，下面看代码：

<!DOCTYPE html>
<html lang="zh">
    <head>
        <meta charset="UTF-8">
        <title>陪你复习巩固，攻破前端技能</title>
    </head>
    <body>
        <button onclick="my_fun()">点击可以隐藏元素哦</button>
        <h2 class="c1">彩虹运维技术栈社区，公众号ID：TtrOpsStack</h2>
        <p class="c1">我们会持续分享运维和运维开发领域相关的技术文章</p>

    <script>
        function my_fun() {
          var x = document.getElementsByClassName("c1");
          for (var i = 0; i < x.length; i++) {
            x[i].style.display = "none";
          }
        }
    </script>
    
    </body>
</html>

效果如下图：

  • 隐藏前

  • 隐藏后

看到效果了吗？隐藏的功能就是通过js实现的，js很强大，后面我们一起专门分享js的知识点。

写在最后

好了，今晚的知识点分享到此为止啦！诚邀广大盆友的关注，望多多点赞、转发、收藏。


本文转载于（喜欢的盆友关注我们）：https://mp.weixin.qq.com/s/c9tXDae2l1osseOwKzILuQ


在线咨询
上一篇：微信扫码实现跳转
下一篇：冷门的HTML - tabindex 的作用

您的项目需求

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

推荐阅读
友情链接 中方县 西峡县 泰来县 正阳县 崇阳县 淅川县 网站制作
Copyright © 2002-2019 雨点网络设计有限公司 版权所有   冀ICP备11025394号
联系电话：   E-mail：279303980@qq.com  
主营业务：技术文章网站建设、网站定制、技术文章营销型网站建设、技术文章网站优化、技术文章微商城制作、三级分销系统开发
电话沟通
在线客服