没有应用 CSS 的动态创建的 HTML 对象答案

【问题标题】：Dynamically Created HTML object not having CSS applied to it没有应用 CSS 的动态创建的 HTML 对象
【发布时间】：2014-10-02 04:57:20
【问题描述】：

最终产品：由 Word 文档中的数据填充的网页，该文档被馈送到循环的 HTML 结构中。

问题：运行时，会创建 HTML 元素，但 在调整窗口大小之前不会应用 CSS 类。

Java 脚本：

    for (i=0; i<=timeline_data.length; i++){
        var newParent = document.getElementById('wgt-timeline-bdy-wrap-id');
        var newItem = document.createElement('div');
        newParent.appendChild(newItem);
        newItem.setAttribute('class','wgt-timeline-bdy-item');

        var newText = document.createElement('p');
        newItem.appendChild(newText);
        newText.setAttribute('class','timeline-new-text');
        newText.id="timeline-" + timeline_data[i].id + "-text";

    }

CSS：

.wgt-timeline-bdy-item {
    display: inline-block;
    font-size: 20px;
    position: relative;
    text-align: center;
    vertical-align: middle;
    width: 100%;
}

.timeline-new-text{
    font-size: 30px;
    position: relative;
    top:40px;
}

在 HTML 中没有什么意外，wgt-timeline-bdy-wrap-id 是一个 div。

提前感谢您的帮助

【问题讨论】：

for 循环在您的代码中的确切位置？你能发布整个脚本吗？
你是把 CSS 放在正文而不是头部吗？可能不是这样，但我以前见过这种情况。
你能做一个 jsfiddle 来演示这个问题吗？ CSS 应该与静态内容一样适用于动态内容。
其实这也是 CSS 的重点之一。许多应用程序通过动态更改元素的类来更改元素的样式。
@Harry 但是循环也是创建新元素的地方。如果它在特定的事件处理程序中，则元素在该事件之前根本不会显示。

标签： javascript html css appendchild createelement

【解决方案1】：

尝试将附加到 DOM 作为循环中的最后一件事（即在设置类之后）。此外，我在大多数地方都是通过element.className = 'xxx' 而不是使用setAttribute() 函数来完成此操作的；不过，不确定这是否重要。

【讨论】：

【解决方案2】：

尝试编写一个 jQuery 函数来在 for 循环执行完成后应用 CSS 样式。像这样的：

for{...}
styleelements();

function styleelements(){
$(".wgt-timeline-bdy-item").css({...});
$(".timeline-new-text").css({...});
}

【讨论】：

为什么这种情况需要jQuery？
嗯，你可以使用 javascripts .style 函数，但我发现 jQuery 通常更快更容易。
不是；人们只是喜欢使用它 b/c 他们不必知道浏览器特定的东西。
必须将所有 CSS 复制到脚本中是一项繁重的要求。这意味着每次他们更新 CSS 文件时，他们都必须对 jQuery 进行相同的更改。没有理由这样做是必要的。
@colinmcp：如果用户试图做一些复杂的事情，那么使用处理所有可能浏览器等的库是可以理解的。但是你并不真的需要 jQuery 来添加/删除类。