簡體   English   中英

如何使用JavaScript在特定情況下加載特定的css文件?

[英]How can I load a specific css file in a specific case with JavaScript?

我想要:

// Display loader spinner
// Check if ID or Class exist in HTML Page
// If ID or Class are found, load a specific css file
// Display HTML PAGE

可能嗎?

在JavaScript中,您將如何檢查頁面中是否存在類:

var isClassExist = document.getElementsByClassName('yourClass');
if (isClassExist .length > 0) {
    // elements with class "yourClass" exist
}

這就是你如何將css文件追加到頁面:

var cssId = 'myCss';  // you could encode the css path itself to generate id..
if (!document.getElementById(cssId))
{
    var head  = document.getElementsByTagName('head')[0];
    var link  = document.createElement('link');
    link.id   = cssId;
    link.rel  = 'stylesheet';
    link.type = 'text/css';
    link.href = 'http://website.com/css/stylesheet.css';
    link.media = 'all';
    head.appendChild(link);
}

裝載機部分:

首先必須在html中包含您的微調器:

<div id="dvReqSpinner" style="display: none;">
    <br />
    <center><img src="~/images/loading_spinner.gif" /></center>
    <br />
</div>

然后在JavaScript中(使用jQuery):

$("#dvReqSpinner").hide();

看到它在行動

 // Let's load the bootstrap CSS, for example. var css_file_path = "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css?" + (new Date()).getTime(); function show_spinning_loader() { var el = document.createElement("div") el.id = "overlay"; el.innerHTML = '<i class="fa fa-spinner fa-spin spin-small"></i>'; document.body.appendChild(el); } function hide_spinning_loader() { var overlay = document.getElementById("overlay"); if (overlay) { overlay.outerHTML = ""; delete overlay; } } function remove_class(name) { document.body.className = document.body.className .replace(new RegExp('(?:^|\\\\s)' + name + '(?:\\\\s|$)'), ' '); } function css_load_callback(m) { hide_spinning_loader(); remove_class('loading'); }; // Load the stylesheet. var url = css_file_path, head = document.getElementsByTagName('head')[0], link = document.createElement('link'); link.type = "text/css"; link.rel = "stylesheet"; link.href = url; // Show the loader. show_spinning_loader(); document.body.className += " loading" // Trigger stylesheet import. head.appendChild(link); // Listen for the DOM onreadystatechange event. if (link.addEventListener) { link.addEventListener('load', function() { css_load_callback(); }, false); }; // Hide loader when done. var cssnum = document.styleSheets.length; var ti = setInterval(function() { if (document.styleSheets.length > cssnum) { css_load_callback(); clearInterval(ti); } }, 10); 
 body.loading * { display: none; } body.loading #overlay { display: block; } #overlay { width: 100%; height: 100%; display: block; background: rgba(0, 0, 0, 0.5); top: 0; left: 0; right: 0; left: 0; position: absolute; } #overlay i { position: absolute; left: 50%; top: 50%; display: inline-block; vertical-align: middle; text-align: center; } .spin-small { text-align: center; margin: auto; font-size: 20px; height: 20px; width: 20px; } 
 <link href="http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet" /> <h2>Twitter Bootstrap</h2> <p>These styles were loaded from bootstrap.</p> 

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM