HTML は CSS スタイルと JS スクリプトを動的に読み込みます。例

HTML は CSS スタイルと JS スクリプトを動的に読み込みます。例

1. スクリプトを動的に読み込む

ウェブサイトの需要が高まるにつれて、スクリプトの需要も徐々に増加します。あまりにも多くの JS スクリプトを導入する必要があり、サイト全体のパフォーマンスが低下するため、適切なタイミングで対応するスクリプトを読み込む動的スクリプトの概念が登場しました。
たとえば、ブラウザを検出する必要がある場合に検出ファイルを導入します。


コードをコピー
コードは次のとおりです。

<script type="text/javascript">
window.onload = 関数(){
アラート(typeof BrowserDetect);
}
var flag = true; //trueに設定してからロードします
if (フラグ) {
loadScript('browserdetect.js'); // 読み込まれたjsを設定する
}
関数loadScript(url) {
var スクリプト = document.createElement('script');
スクリプトタイプ = 'text/javascript';
スクリプトのURLをコピーします。
//document.head.appendChild(script); //document.head は <head> を意味します
document.getElementsByTagName('head')[0].appendChild(スクリプト);
}
</script>js の動的実行</p> <p>
<script type="text/javascript">
window.onload = 関数(){

}
var flag = true; //trueに設定してからロードします
if (フラグ) {
var スクリプト = document.createElement('script');
スクリプトタイプ = 'text/javascript';
var text = document.createTextNode("alert('Lee')"); //IE6、7、8 ブラウザはエラーを報告します
script.appendChild(テキスト);
document.getElementsByTagName('head')[0].appendChild(スクリプト);
}
</script>IE 6、7、8 ブラウザはスクリプトを特別な要素と見なし、子ノードにアクセスできません。互換性のために、代わりにテキスト属性を使用することもできます。 </p> <p>
<script type="text/javascript">
window.onload = 関数(){

}
var flag = true; //trueに設定してからロードします
if (フラグ) {
var スクリプト = document.createElement('script');
スクリプトタイプ = 'text/javascript';
script.text = "alert('Lee')";
script.appendChild(テキスト);
document.getElementsByTagName('head')[0].appendChild(スクリプト);
}
</script> すべてのブラウザと互換性がある必要がある

2. スタイルを動的に読み込む

ウェブサイトのスキンの切り替えなど、スタイルシートを動的に読み込むため。スタイルシートをロードする方法は 2 つあります。1 つは <link> タグ、もう 1 つは <style> タグです。

動的実行リンク


コードをコピー
コードは次のとおりです。

var フラグ = true;
if (フラグ) {
スタイルをロードします('basic.css');
}
関数loadStyles(url) {
var link = document.createElement('link');link.rel = 'スタイルシート';
リンクタイプ = 'text/css';
リンク.href = URL;
document.getElementsByTagName('head')[0].appendChild(リンク);
}


ダイナミック実行スタイル


コードをコピー
コードは次のとおりです。

<script type="text/javascript">
var フラグ = true;
if (フラグ) {
var style = document.createElement('style');
style.type = 'text/css';
//var box = document.createTextNode('#box{background:red}'); // IE6、7、8 はサポートされていません
//style.appendChild(ボックス);
document.getElementsByTagName('head')[0].appendChild(スタイル);
挿入ルール(document.styleSheets[0], '#box', '背景:赤', 0);
}
関数 insertRule(シート、セレクタテキスト、cssテキスト、位置) {
//IE6、7、8でない場合
シートの挿入ルールの場合
sheet.insertRule(セレクタテキスト + "{" + cssテキスト + "}", 位置);
//IE6,7,8の場合
} そうでない場合 (sheet.addRule) {
sheet.addRule(セレクタテキスト、cssテキスト、位置);
}
}
</スクリプト>

<<:  スケルトンスクリーン効果を実現する CSS

>>:  この記事ではSQL CASE WHENの使い方を詳しく説明します

推薦する

Linux でショートカットアイコンを設定する方法

序文Linux でショートカットを作成すると、アプリケーションをより速く開くことができます。ここで、...

MySQL インデックスの正しい使い方とインデックスの原理の詳細な説明

1. はじめになぜインデックスが必要なのでしょうか?一般的なアプリケーション システムでは、読み取り...

ページ切り替え効果を作成するための純粋な CSS3 のサンプルコード

前に書いたものは複雑すぎるので、シンプルなコアにしましょう <html> <ヘッド...

Vue.js の watch メソッドと computed メソッドの違いの詳細な例

目次序文導入1. 作用機序2. 自然から3. 時計と計算の比較4. メソッドはデータロジックの関係を...

MySQL でスロークエリを有効にする方法の例

序文スロー クエリ ログは、MySQL で非常に重要な機能です。MySQL のスロー クエリ ログ機...

IDEA を使用して Web プロジェクトを作成し、Tomcat に公開する方法

目次ウェブ開発1. Web開発の概要Tomcatのインストールと設定Tomcatをインストールする2...

Reactでコンポーネントロジックを共有する3つの方法

簡単に説明すると、これら 3 つの方法は、レンダリング プロップ、高階コンポーネント、カスタム フッ...

nginx 設定の場所の概要の場所の通常の書き込みと書き換えルールの書き込み

1. 場所の正規表現例を見てみましょう: 場所 = / { # 完全一致 / 、ホスト名の後に文字列...

CentOS 6.8 での Hadoop 3.1.1 完全分散インストール ガイド (推奨)

上記：このドキュメントは、3 台の仮想マシンが相互に ping を実行できること、ファイアウォールが...

PDO を使用して SQL インジェクションを防ぐ原理の分析

序文この記事では、SQL インジェクションを回避するために pdo の前処理メソッドを使用します。詳...

Centos に PHP7.4 と Nginx をインストールする方法

準備する1. 必要なインストールパッケージをダウンロードするhttps://www.php.net/...

MySQL のマスタースレーブレプリケーションと読み取り書き込み分離の原理と使用法の詳細な説明

この記事では、例を使用して、MySQL マスター/スレーブ レプリケーションと読み取り/書き込み分離...

2 つのテーブル コピー ステートメントの詳細な説明: SELECT INTO と INSERT INTO SELECT (SQL データベースと Oracle データベースの違い)

1. INSERT INTO SELECT文ステートメントの形式は次のとおりです: Insert ...

require/import キーワードを使用して v-for ループでローカル画像をインポートするいくつかの方法

目次問題の説明方法 1 (バックエンドが画像 URL を返す)方法 2 (フロントエンドで requ...

MySQL のロードバランサーとして nginx を使用する方法

注意: nginxのバージョンは1.9以上である必要があります。nginxをコンパイルするときに、-...