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の使い方を詳しく説明します

推薦する

Ubuntu 18.0.4 は mysql をインストールし、エラー 1698 (28000): ユーザー ''root''@''localhost'' のアクセスが拒否されましたを解決します

序文最近 Linux を学び、その後 Win から Ubuntu に変更しました。以前インストールし...

CentOS 7.4 64 ビット版に MySQL 8.0 をインストールして設定するための詳細な手順

ステップ1: MySQL YUMソースを取得するMySQLの公式サイトにアクセスして、RPMパッケー...

MySQL に絵文字表現を挿入できない問題の解決方法

序文最近この問題に遭遇するまで、私は UTF-8 が文字セットの問題に対する普遍的な解決策だと考えて...

MySQLストレージフィールドタイプのクエリ効率についての簡単な理解

検索パフォーマンスは最速から最遅まで次のとおりです (私が聞いたところによると)。 1 番目: ti...

XHTML Web ページ チュートリアル

この記事は主に、初心者に XHTML の基本的な知識と、XHTML と HTML の違いを理解しても...

Taobao の商品画像切り替え効果を実現する JavaScript

JavaScriptの服装アルバム切り替え効果（Taobao商品画像切り替えに似ています）、参考ま...

v-model 双方向バインディングデータを実装する vue カスタム コンポーネントのサンプル コード

プロジェクトでは、プロジェクトが呼び出すカスタム パブリック コンポーネントに遭遇します。通常、pr...

HTMLページのヘッダーコードは完全に明確です

以下のコードはすべて <head>...</head> の間にあり、具体的な...

MySQLのレプリケーションとチューニングの原則と方法を分析する

1. はじめにMySQL にはレプリケーション ソリューションが付属しており、次のような利点がありま...

MySQL8 でパスワードを忘れた後にパスワードをリセットする方法 (MySQL の古い方法は機能しません)

コマンドライン mysqld –skip-grant-tables は mysql8 では正常に起動...

dockerコンテナの再起動後に/etc内の一部の設定ファイルがリセットされる問題を解決します

1.コンテナ内の /etc/hosts、/etc/resolv.conf、/etc/hostname...

JavaScript カスタム カレンダー効果

この記事では、JavaScriptカスタムカレンダーエフェクトの具体的なコードを参考までに紹介します...

HTML テーブル_Powernode Java アカデミー

HTMLで表を描くには、表タグを使用します。 trは行を意味しますtdは列を示すth はテーブ...

Typescript+React でモバイルと PC でシンプルなドラッグ アンド ドロップ効果を実現

この記事では、モバイルとPCで簡単なドラッグアンドドロップ効果を実現するためのTypescript ...

Dockerは1行のコマンドでFTPサービス構築の実装を完了します

1行のコマンド docker run -d \ -v /share:/home/vsftpd \ -...