Как показать/скрыть конструкцию материала lite spinner с помощью javascript

Question

Я обновляю этот документ.

https://www.getmdl.io/components/index.html#loading-section

я могу показать блесну используя этот HTML-код.

<div class="mdl-spinner mdl-js-spinner is-active"></div> 
<!-- MDL Spinner Component with Single Color --> 
<div class="mdl-spinner mdl-spinner--single-color mdl-js-spinner is-active"> 
</div> 

Но я хочу, чтобы это было сделано с использованием кода сценария java. например, при щелчке кнопки show spinner и при нажатии другой кнопки скрыть тот же счетчик.

Как достичь этого с помощью javascript.

Answer 1

document.getElementById('show').onclick=function(){ 
 
    document.getElementById('spin1').style.display = 'block'; 
 
}; 
 

 
document.getElementById('hide').onclick=function(){ 
 
    document.getElementById('spin1').style.display = 'none'; 
 
};

<link href="https://code.getmdl.io/1.1.1/material.indigo-pink.min.css" rel="stylesheet"/> 
 
<script src="https://code.getmdl.io/1.1.1/material.min.js"></script> 
 

 
<!-- MDL Spinner Component --> 
 
<div id="spin1" class="mdl-spinner mdl-js-spinner is-active"></div> 
 
<!-- MDL Spinner Component with Single Color --> 
 
<div id="spin2" class="mdl-spinner mdl-spinner--single-color mdl-js-spinner is-active"></div> 
 

 
<button id="show">show</button> 
 
<button id="hide">hide</button>

Использование display 'none' и display: 'block' часть вашего вопроса, чтобы показать его с JavaScript, при нажатии на кнопку шоу. Я бы предложил добавить этот html в dom, но по умолчанию он скрыт. Таким образом, вам не нужно вставить HTML с помощью JavaScript

Answer 2

document.getElementById('show').onclick=function(){ 
 
    document.getElementById('spin1').style.display = 'block'; 
 
}; 
 

 
document.getElementById('hide').onclick=function(){ 
 
    document.getElementById('spin1').style.display = 'none'; 
 
};

<link href="https://code.getmdl.io/1.1.1/material.indigo-pink.min.css" rel="stylesheet"/> 
 
<script src="https://code.getmdl.io/1.1.1/material.min.js"></script> 
 

 
<!-- MDL Spinner Component --> 
 
<div id="spin1" class="mdl-spinner mdl-js-spinner is-active"></div> 
 
<!-- MDL Spinner Component with Single Color --> 
 
<div id="spin2" class="mdl-spinner mdl-spinner--single-color mdl-js-spinner is-active"></div> 
 

 
<button id="show">show</button> 
 
<button id="hide">hide</button>

изменяющемся атрибут дисплей, кажется, сломать что-то с блесны в IE11. После «hide» «show» отображает элемент снова, но счетчик не отображается вообще.