CSS/jQueryが存在するかどうかを確認する方法-フロントエンドQ&A-php.cn

CSS と jQuery は、Web 開発で一般的に使用されるツールです。ただし、Web ページのスタイルや動作を柔軟に制御するために、Web ページにそれらが存在するかどうかを判断する必要がある場合があります。この記事では、CSS と jQuery が存在するかどうかを確認する方法について説明し、関連するコード例を示します。

1. CSS が存在するかどうかを判断する

CSS が存在するかどうかを判断する前に、CSS の読み込みプロセスを理解する必要があります。一般に、CSS は HTML ドキュメントのタグ内のタグを通じて導入されます。例:

<head>
  <link rel="stylesheet" type="text/css" href="style.css">
</head>

ログイン後にコピー

上記のコードでは、タグを通じて style.css という名前の CSS ファイルを導入しました。では、この CSS ファイルがロードされているかどうかを確認するにはどうすればよいでしょうか?

要素が存在するかどうかを確認する

JavaScript では、 document.getElementsByTagName("link を通じてタグ内の要素を取得できます) ") メソッドすべての要素を調べ、これらの要素をループして、その href 属性がロードする CSS ファイルパスと等しいかどうかを判断します。等しい場合、CSS ファイルはロードされており、そうでない場合、CSS ファイルはロードされていません。サンプルコードは次のとおりです:

function isCSSExist(url) {
  var links = document.getElementsByTagName("link");
  for (var i = 0; i < links.length; i++) {
    if (links[i].href == url) {
      return true;
    }
  }
  return false;
}

// 判断style.css是否存在
if (isCSSExist("style.css")) {
  console.log("style.css已加载");
} else {
  console.log("style.css未加载");
}

ログイン後にコピー

CSS スタイルが有効かどうかを判断する

要素が存在するかどうかを判断することに加えて、次のことも判断できます。 CSS スタイルが有効かどうか、CSS が読み込まれているかどうか。具体的な方法としては、HTML文書にテスト要素を追加し、その要素の特定のスタイルが有効かどうかを確認します。サンプルコードは次のとおりです。

HTML:

<html>
  <head>
    <link rel="stylesheet" type="text/css" href="style.css">
  </head>
  <body>
    <!-- 测试元素 -->
    <div id="test">测试</div>
  </body>
</html>

ログイン後にコピー

CSS:

/* style.css */
#test {
  color: red;
}

ログイン後にコピー

JavaScript:

function isCSSExist() {
  var test = document.createElement("div");
  test.setAttribute("id", "test");
  document.body.appendChild(test);

  var color = window.getComputedStyle(test, null).getPropertyValue("color");
  if (color == "rgb(255, 0, 0)") {
    return true;
  } else {
    return false;
  }
}

// 判断style.css是否存在
if (isCSSExist()) {
  console.log("style.css已加载");
} else {
  console.log("style.css未加载");
}

ログイン後にコピー

上記のコードでは、 test ;div> 要素の id を取得し、それを HTML ドキュメントに追加します。次に、 getComputedStyle() メソッドを使用して要素のカラースタイルを取得します。カラー値が赤の RGB 値 (255,0,0) と等しい場合は、CSS が有効になっていることを意味します。

2. jQuery が存在するかどうかを判断する

jQuery が存在するかどうかを判断する前に、jQuery の読み込みプロセスを理解する必要があります。一般的に、HTML ドキュメントのタグ内に jQuery JavaScript ライブラリを導入します。例:

<head>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>

ログイン後にコピー

上記のコードでは、

人気のチュートリアル

詳細>

php 8、私も来ます

ウェブサイトのレイアウトを 30 分で学ぶ

ビデオチュートリアルに精通したOracleの入門

あなたの最初のUNI-APPコード

ゼロからアプリの起動までフラッター

兄弟連新版Linuxビデオチュートリアル

AXURE 9 ビデオチュートリアル (プロダクトマネージャーのインタラクティブな製品設計 UI に適しています)

基礎能力ゼロ PS ビデオチュートリアル

16日間のUIビデオチュートリアル

PS テクニックとスライステクニックのビデオチュートリアル

アリクラウド環境構築およびプロジェクトオンラインビデオチュートリアル

コンピュータネットワークの概要 - プログラマが身につけるべき基礎知識

プログラマーのための基本チュートリアル - HTTP プロトコルの説明

Websocket ビデオチュートリアル

CSS/jQueryが存在するかどうかを確認する方法