JavaScript代碼怎樣引入到HTML中？

avaScript 程序不能獨(dú)立運(yùn)行，它需要被嵌入 HTML 中，然后瀏覽器才能執(zhí)行 JavaScript 代碼。通過 <script> 標(biāo)簽將 JavaScript 代碼引入到 HTML 中，有兩種方式：
1.內(nèi)部方式
內(nèi)部方式是通過<script>標(biāo)簽包裹JavaScript代碼,從而引入HTML頁面中，示例代碼如下：

<!DOCTYPE html>
 <html>
 <head>
   <meta charset="UTF-8">
   <title>JavaScript 基礎(chǔ) - 引入方式</title>
 </head>
 <body>
   <!-- 內(nèi)聯(lián)形式：通過 script 標(biāo)簽包裹 JavaScript 代碼 -->
   <script>
     alert('嗨，歡迎來傳智播學(xué)習(xí)前端技術(shù)！')
   </script>
 </body>
 </html>

2.外部形式

一般將 JavaScript 代碼寫在獨(dú)立的以 .js 結(jié)尾的文件中，然后通過 <script>標(biāo)簽的 <src>屬性引入，示例代碼如下：

// demo.js
document.write('嗨，歡迎來傳智播學(xué)習(xí)前端技術(shù)！')

<!DOCTYPE html>
 <html>
 <head>
   <meta charset="UTF-8">
   <title>JavaScript 基礎(chǔ) - 引入方式</title>
 </head>
 <body>
   <!-- 外部形式：通過 script 的 src 屬性引入獨(dú)立的 .js 文件 -->
   <script src="demo.js"></script>
 </body>
 </html>

注意：如果 script 標(biāo)簽使用 src 屬性引入了某 .js 文件，那么標(biāo)簽的代碼會被忽略！??！如下代碼所示：

HTML 中，通過 JavaScript 來獲取當(dāng)前元素的高度通常使用以下屬性：

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

如果你想獲取元素的 CSS 定義的高度（不包括 padding 和 border），可以使用 style.height，但這只能獲取到直接寫在元素行內(nèi)樣式中的高度，而不是計(jì)算后的實(shí)際高度或 CSS 樣式表中定義的高度：

var heightInStyle = element.style.height; // 只獲取行內(nèi)樣式設(shè)置的高度

在 React 中獲取當(dāng)前元素的高度方式與 JavaScript 相似，但是你需要確保在 DOM 更新后獲取元素高度。可以使用 ref 來訪問實(shí)際 DOM 節(jié)點(diǎn)并獲取其高度：

import React, { useRef, useEffect } from 'react';function YourComponent() {  const elementRef = useRef(null);  useEffect(() => {    if (elementRef.current) {      // 在這里，elementRef.current.clientHeight 獲取元素的內(nèi)容區(qū)域高度（不包括padding和border）      // elementRef.current.offsetHeight 獲取元素的實(shí)際渲染高度（包括padding和border，但不包括margin）      console.log('Element height:', elementRef.current.offsetHeight);
    }
  }, []); // 確保此useEffect只在組件掛載后執(zhí)行一次  return (    <div ref={elementRef}>
      {/* 你的組件內(nèi)容 */}    </div>
  );
}export default YourComponent;

在上述代碼中，useRef 創(chuàng)建了一個(gè)可變的引用對象，它可以用來保存任何可變值，包括 DOM 節(jié)點(diǎn)。然后通過將這個(gè) ref 對象賦給元素的 ref 屬性，React 會將對應(yīng)的 DOM 節(jié)點(diǎn)保存到這個(gè) ref 對象的 .current 屬性上，這樣我們就可以在回調(diào)函數(shù)或者其他適當(dāng)?shù)牡胤皆L問到該 DOM 節(jié)點(diǎn)，并獲取其高度了。

如果要在圖片加載完成后獲取包含圖片的元素高度，可以監(jiān)聽圖片的 load 事件。在 React 中，你可以在組件內(nèi)創(chuàng)建一個(gè)圖片引用，并在 useEffect 中監(jiān)聽圖片加載完成：

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已經(jīng)存在于DOM中，則立即觸發(fā)handleImageLoad    // 否則，在img加載完成后觸發(fā)handleImageLoad    if (imgRef.current && imgRef.current.complete) {      handleImageLoad();
    } else {
      imgRef.current.onload = handleImageLoad;
    }    // 可以選擇在組件卸載時(shí)清除事件監(jiān)聽，避免內(nèi)存泄漏    return () => {
      imgRef.current.onload = null;
    };
  }, []); // 確保此useEffect只在組件掛載后執(zhí)行一次  return (    <div ref={elementRef}>      <img src="your-image-source.jpg" ref={imgRef} alt="Your Image" />
      {/* 其他內(nèi)容 */}    </div>
  );
}export default YourComponent;

這樣，當(dāng)圖片加載完成后，就會觸發(fā) handleImageLoad 函數(shù)，從而獲取到包含圖片的元素的實(shí)際高度。

如果圖片是服務(wù)端渲染的，并且你無法直接在 img 標(biāo)簽上添加 ref，你可以考慮監(jiān)聽整個(gè)組件的 onLoad 事件來判斷圖片是否加載完成。由于 React 在瀏覽器中重新渲染時(shí)會保留 DOM 節(jié)點(diǎn)（除非有更改），所以可以通過檢查元素的 offsetHeight 是否有變化來判斷圖片是否加載完畢。

在開篇

開篇之前，先提個(gè)問題，什么是類？分類嗎？可以這么說吧！我們可以給物體分類，也可以給人分類。正所謂，物以類聚，人以群分。難道我們這里是給元素分類？用分類來理解是不準(zhǔn)確的啦！從某些角度，也可以理解成分類，說白了也就是個(gè)標(biāo)識而已。廢話不說，我們正式步入今晚的主題！

HTML類

html中的類是什么鬼？先上個(gè)例子，然后再剖析它：

<!DOCTYPE html>
<html lang="zh">
    <head>
        <meta charset="UTF-8">
        <title>陪你復(fù)習(xí)鞏固，攻破前端技能</title>
        <style>
            .c1 {
              background-color: tomato;
              color: white;
              border: 2px solid black;
              margin: 20px;
              padding: 20px;
            }
        </style>
    </head>
    <body>
        <div class="c1">
            <h2>彩虹運(yùn)維技術(shù)棧社區(qū)，公眾號ID：TtrOpsStack</h2>
        </div>

        <div class="c1">
            <p>筆者親自設(shè)計(jì)的，一個(gè)入侵性極低的Oracle監(jiān)控方案</p>
            <a href="https://mp.weixin.qq.com/s/PDm2bK7IMFOwjNHFOblgXg" target="_blank">oracledb_exporter監(jiān)控Oracle，一個(gè)入侵性極低的監(jiān)控方案。</a>
        </div>

        <div class="c1">
            <p>意猶未盡的第2篇再次推出，一個(gè)入侵性極低的Oracle監(jiān)控方案</p>
            <a href="https://mp.weixin.qq.com/s/gFeWlZRGkIMAOCNFpKm8-Q" target="_blank">意猶未盡的第2篇再次推出，繼續(xù)講解oracledb_exporter監(jiān)控Oracle，一個(gè)入侵性極低的監(jiān)控方案。</a>
        <div>
    </body>
</html>

效果如下圖：

好了，我們正式開始對它進(jìn)行剖析，搞清楚到底啥是類，上面的小栗子中，定義了3個(gè)div元素，它們的class屬性值均為 "c1"。然后注意到?jīng)]有？在head中的style標(biāo)簽里，通過 ”.c1“ 的方式同時(shí)對3個(gè)div進(jìn)行了css樣式的設(shè)置。所以也由此引出了它的一個(gè)特點(diǎn)，那就是多個(gè)HTML元素可以共享同一個(gè)類，上述的例子中3個(gè)div（元素）的類（class）名都定義了為“c1”，且同時(shí)對3個(gè)div進(jìn)行了css樣式的設(shè)置，這就是它的共享性。不知道筆者說明白了沒有，好尷尬。

那接下來，我們再來個(gè)小栗子：

<!DOCTYPE html>
<html lang="zh">
    <head>
        <meta charset="UTF-8">
        <title>陪你復(fù)習(xí)鞏固，攻破前端技能</title>
        <style>
            .c2 {
                font-size: 120%;
                color: crimson;
            }
        </style>
    </head>
    <body>
        <h1>彩虹<span class="c2">運(yùn)維</span>技術(shù)棧社區(qū)</h1>
        <p>我們會<span class="c2">持續(xù)分享</span>運(yùn)維和運(yùn)維開發(fā)領(lǐng)域相關(guān)的技術(shù)文章</p>
    </body>
</html>

效果如下圖：

上面的例子中，“運(yùn)維”和“持續(xù)分享”這兩個(gè)字都在span標(biāo)簽里，且這兩個(gè)span標(biāo)簽都定義了class屬性，class=“c2”，同時(shí)通過“.c2”的方式設(shè)置了CSS屬性。上面的例子中，就是通過這樣的辦法實(shí)現(xiàn)了對某部分的文字進(jìn)行樣式的設(shè)置。

截止目前，我們通過兩個(gè)小栗子，直接解剖了什么是類，那么我們再做個(gè)小總結(jié)：

class屬性可以用于任何HTML元素
類名區(qū)分大小寫

CLASS的語法

其實(shí)在前面的小栗子中，已經(jīng)講解過class的語法了，不知道廣大盆友們注意到了沒有。如果沒有注意到，咱們再這個(gè)章節(jié)重新復(fù)習(xí)一下。

看下面代碼：

<!DOCTYPE html>
<html lang="zh">
    <head>
        <meta charset="UTF-8">
        <title>陪你復(fù)習(xí)鞏固，攻破前端技能</title>
        <style>
            .cc3 {
              background-color: blue;
              color: white;
              padding: 8px;
            }
        </style>
    </head>
    <body>
        <h2 class="cc3">彩虹運(yùn)維技術(shù)棧社區(qū)，公眾號ID：TtrOpsStack</h2>
        <p class="cc3">我們會持續(xù)分享運(yùn)維和運(yùn)維開發(fā)領(lǐng)域相關(guān)的技術(shù)文章</p>
    </body>
</html>

效果如下圖：

上面的例子中，是如何引用到文本內(nèi)容并設(shè)置CSS屬性的呢？答案就是通過.css3這樣的語法，我們設(shè)置的類名是css3。然后在style中，設(shè)置css屬性，在{}大括號里的內(nèi)容就是CSS的屬性，關(guān)于CSS，筆者后續(xù)會專門逐一講解哈。

一個(gè)元素可以屬于多個(gè)類

什么？一個(gè)元素可以屬于多個(gè)類？到底怎么玩，廢話不說，咱們上個(gè)例子就知道了。下面的例子，是在上一個(gè)例子的基礎(chǔ)上進(jìn)行了小改造，看下面代碼：

<!DOCTYPE html>
<html lang="zh">
    <head>
        <meta charset="UTF-8">
        <title>陪你復(fù)習(xí)鞏固，攻破前端技能</title>
        <style>
            .cc3 {
              background-color: blue;
              color: white;
              padding: 8px;
            }
            .css4 {
                text-align: center;
            }
        </style>
    </head>
    <body>
        <h2 class="cc3 css4">彩虹運(yùn)維技術(shù)棧社區(qū)，公眾號ID：TtrOpsStack</h2>
        <p class="cc3">我們會持續(xù)分享運(yùn)維和運(yùn)維開發(fā)領(lǐng)域相關(guān)的技術(shù)文章</p>
    </body>
</html>

效果如下圖：

注意到這個(gè)語法了嗎？class="cc3 css4"，沒錯(cuò)了！在上面的style中，分別對同一個(gè)h2元素進(jìn)行設(shè)置了不同的CSS屬性。也就是說，對同一個(gè)元素需要定義多個(gè)類，用空格分隔類名就可以實(shí)現(xiàn)啦！是不是太簡單了啦？

類的復(fù)用

什么？類的復(fù)用怎么理解？也就是說不同的元素可以共享同一個(gè)類。其實(shí)這個(gè)概念，在之前的例子中都有用到啦！只不過還沒有拋出這個(gè)概念而已，下面我們來個(gè)小栗子，鞏固一下。

這個(gè)例子是在上一個(gè)例子的基礎(chǔ)上做了小改造，看下面代碼：

<!DOCTYPE html>
<html lang="zh">
    <head>
        <meta charset="UTF-8">
        <title>陪你復(fù)習(xí)鞏固，攻破前端技能</title>
        <style>
            .share_class {
                background-color: blue;
                color: white;
                padding: 8px;
                text-align: center;
            }
        </style>
    </head>
    <body>
        <h2 class="share_class">彩虹運(yùn)維技術(shù)棧社區(qū)，公眾號ID：TtrOpsStack</h2>
        <p class="share_class">我們會持續(xù)分享運(yùn)維和運(yùn)維開發(fā)領(lǐng)域相關(guān)的技術(shù)文章</p>
    </body>
</html>

效果如下圖：

注意到了嗎？兩個(gè)元素：h2和p元素，都使用了相同的類，類名叫share_class，這就達(dá)到了復(fù)用的效果呀！

JavaScript使用class

截止目前，還沒講解到j(luò)s，那么先講個(gè)小知識點(diǎn)，js如何使用class的。當(dāng)然，核心的用法也是使用類名為指定的元素完成一些功能，在JavaScript里是通過getElementsByClassName()方法來訪問元素中的類名，反言之，也可以說是通過getElementsByClassName()方法來訪問帶有指定類名的元素。關(guān)于js的知識，后續(xù)筆者會一一講解每個(gè)知識點(diǎn)，不急，咱們慢慢來。

下面，先來個(gè)小栗子，這例子很簡單，通過js實(shí)現(xiàn)點(diǎn)擊后隱藏h2和p元素的內(nèi)容，下面看代碼：

<!DOCTYPE html>
<html lang="zh">
    <head>
        <meta charset="UTF-8">
        <title>陪你復(fù)習(xí)鞏固，攻破前端技能</title>
    </head>
    <body>
        <button onclick="my_fun()">點(diǎn)擊可以隱藏元素哦</button>
        <h2 class="c1">彩虹運(yùn)維技術(shù)棧社區(qū)，公眾號ID：TtrOpsStack</h2>
        <p class="c1">我們會持續(xù)分享運(yùn)維和運(yùn)維開發(fā)領(lǐng)域相關(guān)的技術(shù)文章</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實(shí)現(xiàn)的，js很強(qiáng)大，后面我們一起專門分享js的知識點(diǎn)。

寫在最后

好了，今晚的知識點(diǎn)分享到此為止啦！誠邀廣大盆友的關(guān)注，望多多點(diǎn)贊、轉(zhuǎn)發(fā)、收藏。

本文轉(zhuǎn)載于（喜歡的盆友關(guān)注我們）：https://mp.weixin.qq.com/s/c9tXDae2l1osseOwKzILuQ

在線咨詢

上一篇：微信掃碼實(shí)現(xiàn)跳轉(zhuǎn)
下一篇：冷門的HTML - tabindex 的作用

您的項(xiàng)目需求

*請認(rèn)真填寫需求信息，我們會在24小時(shí)內(nèi)與您取得聯(lián)系。

整合營銷服務(wù)商

JavaScript代碼怎樣引入到HTML中？

在開篇

HTML類

CLASS的語法

一個(gè)元素可以屬于多個(gè)類

類的復(fù)用

JavaScript使用class

寫在最后

您的項(xiàng)目需求

JavaScript代碼怎樣引入到HTML中？