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脚本代码完成同样的事情。例如，单击按钮显示微调器并单击另一个按钮隐藏相同的微调器。

如何使用javascript实现相同功能。

Answer 1

＆＃13;

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

＆＃13;

<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>

＆＃13;

使用display 'none'和display: 'block' 您的部分问题是在点击“显示”按钮时使用javascript显示它。我建议将这个html添加到dom中，但默认情况下将其隐藏起来。这样您就不必通过javascript

插入html

Answer 2

＆＃13;

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

＆＃13;

<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>

＆＃13;

更改display属性似乎与IE11中的微调器有所不同。隐藏＆＃39;之后＆＃39;显示＆＃39;再次显示元素，但微调器根本不可见。

如何使用javascript显示/隐藏材质设计精简微调器

2 个答案: