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

推薦する

MySQL の日付と時刻関数の概要 (MySQL 5.X)

1. MySQLは現在の日付と時刻を取得する関数1.1 現在の日付 + 時刻 (日付 + 時刻) ...

Dockerイメージ内のnoneイメージ操作を削除する

普段はdocker buildコマンドでイメージを生成していますが、コードの更新が頻繁に行われるとn...

MySQL 5.7.30 のインストールとアップグレードの問題に関する詳細なチュートリアル

くさびコンピュータにインストールされている MySQL のバージョンが比較的古く、おそらくバージョン...

オンライン MYSQL 同期エラーのトラブルシューティング方法の概要 (必読)

序文フェイルオーバーが発生した後、よくある問題は同期エラーです。データベースが小さい場合は、ダンプし...

回転するフリップカードアニメーションの効果を実現するCSS

回転フリップ効果の CSS アニメーション、具体的な内容は次のとおりです。 1. まず2つのボックス...

Vant Uploaderは1枚以上の写真をアップロードするコンポーネントを実装します

この記事では、1枚以上の写真をアップロードするためのVant Uploaderコンポーネントを紹介し...

Linuxの同時実行は簡単です。このようにするだけです

並行処理関数 i の `grep server /etc/hosts | awk '{pri...

jQueryは居住地を選択するためのドロップダウンボックスを実装します

居住地を選択するためのドロップダウンボックスをjQueryで実装するための具体的なコードは参考までに...

VMware は Centos7 システムの PXE+kickstart 無人インストールの詳細なプロセスを実装します

目次PXEはサーバーの無人バッチ展開を実装します1. PXEの概要1.1 PXEとは何か1.2 キッ...

MySQL 5.7 の一時テーブルスペースを使用して落とし穴を回避する方法

導入MySQL 5.7 は、SSL/TLS と全体的なセキュリティ開発におけるいくつかの重要な変更に...

Vue3 (III) ウェブサイトホームページレイアウト開発

目次1. はじめに2. 実際の事例1. App.vueを変更する2. レイアウトを調整する3. ジャ...

Alibaba Cloud ESC に MYSQL8.0 をインストールするチュートリアル

接続ツールを開きます。私はMobaXterm_Personal_12.1を使用します（公式サイトのダ...

CSS3 フィルター属性の使い方の紹介

1. はじめにフロントエンドページのアニメーション効果を記述する場合、filter 属性は多かれ少な...

Docker 実行時にユーザーとグループを管理する方法

Docker はプロセスを中核としてシステムリソースを分離する管理ツールです。分離は、オペレーティン...

Linux環境でのActiveMQ導入方法の詳しい説明

この記事では、Linux 環境での ActiveMQ の展開方法について説明します。ご参考までに、詳...