HTML dynamically loads css styles and js scripts example

HTML dynamically loads css styles and js scripts example

1. Dynamically loading scripts

As the demand for websites grows, the demand for scripts also gradually increases. We have to introduce too many JS scripts and reduce the performance of the entire site, so the concept of dynamic scripts emerged to load the corresponding scripts at the right time.
For example: We want to introduce the detection file when we need to detect the browser.


Copy code
The code is as follows:

<script type="text/javascript">
window.onload = function(){
alert(typeof BrowserDetect);
}
var flag = true; //Set true and then load
if (flag) {
loadScript('browserdetect.js'); //Set the loaded js
}
function loadScript(url) {
var script = document.createElement('script');
script.type = 'text/javascript';
script.src = url;
//document.head.appendChild(script); //document.head means <head>
document.getElementsByTagName('head')[0].appendChild(script);
}
</script>Dynamic execution of js</p> <p>
<script type="text/javascript">
window.onload = function(){

}
var flag = true; //Set true and then load
if (flag) {
var script = document.createElement('script');
script.type = 'text/javascript';
var text = document.createTextNode("alert('Lee')"); //IE6,7,8 browsers report an error
script.appendChild(text);
document.getElementsByTagName('head')[0].appendChild(script);
}
</script>IE 6, 7, and 8 browsers consider script to be a special element and cannot access child nodes. For compatibility, the text attribute can be used instead. </p> <p>
<script type="text/javascript">
window.onload = function(){

}
var flag = true; //Set true and then load
if (flag) {
var script = document.createElement('script');
script.type = 'text/javascript';
script.text = "alert('Lee')";
script.appendChild(text);
document.getElementsByTagName('head')[0].appendChild(script);
}
</script> Need to be compatible with all browsers

2. Dynamically loading styles

In order to dynamically load style sheets, such as switching website skins. There are two ways to load a style sheet, one is the <link> tag and the other is the <style> tag.

Dynamic executionlink


Copy code
The code is as follows:

var flag = true;
if (flag) {
loadStyles('basic.css');
}
function loadStyles(url) {
var link = document.createElement('link');link.rel = 'stylesheet';
link.type = 'text/css';
link.href = url;
document.getElementsByTagName('head')[0].appendChild(link);
}


Dynamic execution style


Copy code
The code is as follows:

<script type="text/javascript">
var flag = true;
if (flag) {
var style = document.createElement('style');
style.type = 'text/css';
//var box = document.createTextNode('#box{background:red}'); // IE6,7,8 not supported
//style.appendChild(box);
document.getElementsByTagName('head')[0].appendChild(style);
insertRule(document.styleSheets[0], '#box', 'background:red', 0);
}
function insertRule(sheet, selectorText, cssText, position) {
//If it is not IE6,7,8
if (sheet.insertRule) {
sheet.insertRule(selectorText + "{" + cssText + "}", position);
//If it is IE6,7,8
} else if (sheet.addRule) {
sheet.addRule(selectorText, cssText, position);
}
}
</script>

<<:  CSS to achieve Skeleton Screen effect

>>:  Layui implements the login interface verification code

Recommend

How to enable Flash in Windows Server 2016

I recently deployed and tested VMware Horizon, an...

JavaScript css3 to implement simple video barrage function

This article attempts to write a demo to simulate...

Apache ab concurrent load stress test implementation method

ab command principle Apache's ab command simu...

How to generate mysql primary key id (self-increment, unique and irregular)

Table of contents 1. Use the uuid function to gen...

MySQL join buffer principle

Table of contents 1. MySQL join buffer 2. JoinBuf...

Solve the problem of inconsistent MySQL storage time

After obtaining the system time using Java and st...

Node.js file copying, folder creation and other related operations

NodeJS copies the files: Generally, the copy oper...

MySql cache query principle and cache monitoring and index monitoring introduction

Query Cache 1. Query Cache Operation Principle Be...

MySql grouping and randomly getting one piece of data from each group

Idea: Just sort randomly first and then group. 1....

Briefly understand the MYSQL database optimization stage

introduction Have you ever encountered a situatio...

The complete version of the common Linux tool vi/vim

Why learn vim Linux has a large number of configu...

How to install grafana and add influxdb monitoring under Linux

Install grafana. The official website provides an...

Markup validation for doctype

But recently I found that using this method will c...

How to write asynchronous tasks in modern JavaScript

Preface In this article, we'll explore the ev...

About MySQL 8.0.13 zip package installation method

MySQL 8.0.13 has a data folder by default. This f...