私がしたい：JavaScriptを使用して特定のケースで特定のCSSファイルを読み込むにはどうすればよいですか？
// 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>
その後：
$("#dvReqSpinner").hide();
'var checkButtons = document.getElementsByClassName（ 'button'）; '私はあなたの完全なAPPENDを配置します{ \t //次 に渡し}他{資産/スタイルシート/ショートコード/ボタンから //読み込みCSSファイル/ button.min.css }（checkClasses .LENGTH> 0）場合もしあれば、スクリプト？ – Robeala
正確です。 2番目のコードスニペットを 'if' – user3378165
に入れなければなりませんが、スピンローダについてはどうでしょうか:)。もし私があなたに尋ねることができたら、どうすればそれを統合できるのですか？ – Robeala
// 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>
"可能であることを" 聞かないでください？一部の人々はあなたを文字通りに連れて "はい"と答えるかもしれません（ほとんどのことが可能なコンピュータで作業しているので、ほとんどの場合答えになるでしょう）。あなたが何かをする方法を知りたければ、それをやる方法を尋ねます。また、一度に1つの質問をしてください。スピンローダーは、動的にCSSを読み込むこととは全く別の問題です。最後に、「Vanilla JS」を指定する必要はありません。特定のフレームワークまたはライブラリを指定しない限り、これがデフォルトです。 –
人々が私に尋ねるものを理解するように見える – Robeala
私はあなたを殺していない。私は助言をしています。あなたがそれらを受け入れることを選択した場合、それもそうです。もう一つの有益な提案：参考にしてください。 –