Material Design Lite和Javascript
Material Design Lite和Javascript
提问于 2018-03-24 16:34:36
我想添加一个新的滑块组件的MDL库使用JS。当我在HTML中定义滑块组件时，该组件被正确加载，但是当我尝试使用javascript添加它时，样式并没有应用于滑块。为什么会发生这种情况？库链接：https://getmdl.io/components/index.html#sliders-section我在主页上看到有一种特殊的方式来动态显示组件，但我不知道它是如何工作的。链接：https://getmdl.io/started/index.html
function create()
{
var element = document.createElement("input");
element.className = "mdl-slider mdl-js-slider";
element.setAttribute("type","range");
element.setAttribute("min","0");
element.setAttribute("value","0");
element.setAttribute("max","100");
element.setAttribute("tabindex","0");
document.getElementById("c").appendChild(element);
}<head>
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet" href="https://code.getmdl.io/1.3.0/material.indigo-pink.min.css">
<script defer src="https://code.getmdl.io/1.3.0/material.min.js"></script>
</head>
<body>
<div id="c">
<input class="mdl-slider mdl-js-slider" type="range" min="0" max="100" value="0" tabindex="0">
<button onclick="create()">Click me</button>
</div>
</body>
回答 1
Stack Overflow用户
发布于 2018-03-27 03:13:54
function create()
{
var element = document.createElement("input");
element.className = "mdl-slider mdl-js-slider";
element.setAttribute("type","range");
element.setAttribute("min","0");
element.setAttribute("value","0");
element.setAttribute("max","100");
element.setAttribute("tabindex","0");
document.getElementById("c").appendChild(element);
componentHandler.upgradeElement(element); // <--- Note the MDL element registration
}Material Design Lite Documentation的适用部分
Material Design Lite将在页面加载时自动注册并渲染所有标记为MDL类的元素。但是，在动态创建DOM元素的情况下，需要使用
upgradeElement函数.
注册新元素
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/49462771
复制相关文章
相似问题
腾讯云开发者
