材料设计精简版和Javascript

Question

我想通过使用JS添加MDL库的新滑块组件。 当我在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>

Answer 1

使用MDL动态创建元素时，需要使用upgradeElement函数注册新元素。 在您的特定情况下，您的代码将如下所示：

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文档的适用部分：

Material Design Lite将在页面加载时自动注册并呈现所有标记有MDL类的元素。 但是，在动态创建DOM元素的情况下，需要使用upgradeElement函数注册新元素。

材料设计精简版和Javascript

问题描述

1 个解决方案

解决方案1
1 2018-03-26 19:13:54

材料设计精简版和Javascript

问题描述

1 个解决方案

解决方案1 1 2018-03-26 19:13:54

解决方案1
1 2018-03-26 19:13:54