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

Detailed explanation of Linux text processing command sort

sort Sort the contents of a text file Usage: sort...

Detailed explanation of 30 SQL query optimization techniques for MySQL tens of millions of large data

1. To optimize the query, try to avoid full table...

Example steps for implementing class selectors and name attribute selectors in js

The emergence of jQuery has greatly improved our ...

MySQL table auto-increment id overflow fault review solution

Problem: The overflow of the auto-increment ID in...

Detailed explanation of the difference between IE8 compatibility view (IE7 mode) and standalone IE7

one. Overview of IE8 Compatibility View <br /&...

Vant uploader implements the drag-and-drop function for uploading pictures (set as cover)

The effect diagram is as follows: <!DOCTYPE ht...

27 Linux document editing commands worth collecting

Linux col command The Linux col command is used t...

Nginx content cache and common parameter configuration details

Use scenarios: The project's pages need to lo...

Vue Element front-end application development: Use of API Store View in Vuex

Table of contents Overview 1. Separation of front...

How to install OpenSuse on virtualbox

The virtual machine is installed on the host mach...

React+axios implements github search user function (sample code)

load Request Success Request failed Click cmd and...

How to use Nexus to add jar packages to private servers

Why do we need to build a nexus private server? T...

Several methods to clear floating (recommended)

1. Add an empty element of the same type, and the...

Using js to achieve the effect of carousel

Today, let's talk about how to use js to achi...

How to run Spring Boot application in Docker

In the past few days, I have studied how to run s...