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

Docker time zone issue and data migration issue

Latest solution: -v /usr/share/zoneinfo/Asia/Shan...

Design Tips: We think you will like it

<br />Looking at this title, you may find it...

Web Design Tutorial (8): Web Page Hierarchy and Space Design

<br />Previous article: Web Design Tutorial ...

Getting Started with Vue 3.0 Custom Directives

Table of contents 1. Custom instructions 1. Regis...

Specific usage of fullpage.js full screen scrolling

1.fullpage.js Download address https://github.com...

Detailed explanation of various ways to merge javascript objects

Table of contents Various ways to merge objects (...

Troubleshooting the security group ports added by Alibaba Cloud and the inability to access them after adding them

Purpose: 1. In order to map the server's exte...

Sample code for testing technology application based on Docker+Selenium Grid

Introduction to Selenium Grid Although some new f...

WeChat applet scroll-view implements a solution to duplicate data loading when pulling up

The scroll-view of WeChat applet has more bugs wh...

Simple example of limit parameter of mysql paging

Two parameters of Mysql paging select * from user...

Implementation ideas for docker registry image synchronization

Intro Previously, our docker images were stored i...

Tutorial diagram of installing centos7.3 on vmware virtual machine

VMware Preparation CentOS preparation, here is Ce...

How to run MySQL in Docker environment and enable Binlog to configure master-slave synchronization

The same server simulates the master-slave synchr...

Implementation of Docker batch container orchestration

Introduction Dockerfile build run is a manual ope...

Method for realizing Internet interconnection by VMware virtual machine bridging

After installing VMware and creating a new virtua...