具有动态与静态加载页面的 CSS 类答案

【问题标题】：CSS classes with dyanamic vs statically loaded pages具有动态与静态加载页面的 CSS 类
【发布时间】：2012-02-17 18:50:34
【问题描述】：

我现在正在开发一个需要执行大量绘图和大量客户端操作的 Web 应用程序。我在具有某些 CSS 类和样式属性的“div”元素中使用内联 SVG。当我在静态页面中加载这些 div 时，它们加载正常，一切都按预期运行。但是，当我使用 jQuery 从字符串中解析这些并将它们添加到 DOM 时，它们不会。就像 CSS 类被完全忽略一样。

当我在 Firebug 中检查不同情况下的元素时，我得到了一个意想不到的结果：静态添加的元素具有预期的类名：'class1 class2 class3'，动态生成的元素也是如此。但是，静态生成的元素也有一个“classList”属性，它是一个包含 3 个元素的数组：“class1”、“class2”和“class3”。对于动态生成的元素，该属性为空。静态生成的元素适用于 CSS（获取我所有的悬停、可拖动等），而动态生成的元素看起来甚至根本没有应用 CSS。有人可以解释一下“classList”是什么，它为什么存在，以及为什么元素之间存在这种差异吗？

【问题讨论】：

classList 是一个便利属性：developer.mozilla.org/en/DOM/element.classList
无论如何你可以发布一个你看到的jQuery动态代码的例子吗？
一个 jsfiddle.net 演示会很棒。
另外，如果你使用"div.classList.add("someclass");"，它应该成功地添加一个类到那个div。 div 是否也是动态生成的，还是可以将 div 作为占位符静态保留在页面上，然后使用“添加”例程？

标签： javascript html css

【解决方案1】：

classList 只是一个访问元素类的便捷 API。见enter link description here。

但是，我不知道为什么您的动态内容在这里确实有一个空值，但是一个正确的 className 条目。

【讨论】：