如何将 css 应用于动态 HTML 内容？答案

【问题标题】：how to apply css to dynamic HTML content?如何将 css 应用于动态 HTML 内容？
【发布时间】：2017-07-16 14:54:52
【问题描述】：

我是 CSS 和学习新手。

我的问题是，

如果我的 HTML 内容延迟加载可能是因为ajax请求，如果我将该 html 响应附加到已加载的 div 标记；

如何将 CSS 应用到内部 HTML。

假设我有 div 标签，

<div class="row">
    <div class="col-md-5 col-md-offset-2">
        <div id="theTableContainer"></div>
    </div>
</div>

如果我尝试在 id 为“theTableContainer”的 div 中加载 html，

html附加到div后我会在xhr成功的回调函数中应用css

如下

$("#theTableContainer table tr:gt(0)").each(function(){
        $(this).find("td:eq(2)").
            css("background-color","#8600e6").
            css("color","#F8F8FF").
            css("font-weight","bold");
});

有没有更好的办法？

请在下面找到工作代码的链接。

My Working example

【问题讨论】：

标签： javascript jquery css underscore.js

【解决方案1】：

更好的方法是添加你想要添加的css类，然后使用addClass动态添加css。

$("#theTableContainer table tr").each(function(){
        $(this).find("td").addClass('background color font-weight');
});

.background {
background-color: red;
}

.color {
 color: white;
}

.font-weight {
 font-weight: 'bold';
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">
    <div class="col-md-5 col-md-offset-2">
        <div id="theTableContainer">
        <table>
         <tr>
         <td>
          example
         </td>
         </tr>
        </table>
        </div>
    </div>
</div>

【讨论】：

【解决方案2】：

您可以随时在您的 css 中添加样式：

#theTableContainer table tbody tr td:nth-child(3){
  background-color: #8600e6;
  color: #F8F8FF;
  font-weight: bold;
}

更新后的fiddle。

另一种方法是基于grouping the css：

$(this).find("td:eq(2)").css({"background-color": "#8600e6", 
                              "color":"#F8F8FF",
                              "font-weight":"bold"});

【讨论】：

【解决方案3】：

你可以创建一个包含所有你想要的 CSS 属性的类：

.active {
    background-color: #8600e6;
    color: #F8F8FF;
    font-weight: bold;
}

并应用它：

$(this).find("td:eq(2)").addClass('active');

Here is jfiddle.

【讨论】：