如何在JavaScript/JSON代码中为cart-total div添加样式？

看起来你是在动态生成页面内容的场景下，想给.cart-total这个div设置样式对吧？这里有几个靠谱的实现方式，你可以根据自己的需求来选：

1. 动态创建元素时直接内嵌样式 #

如果这个cart-total div是你在success回调里动态生成的，那可以直接在HTML字符串里加入style属性，快速给元素设置专属样式：

if (json['success']) { 
  $('#content').parent().before(`
    <div class="alert alert-success">
      <i class="fa fa-check-circle"></i> ${json['success']}
      <button type="button" class="close" data-dismiss="alert">&times;</button>
      <!-- 内嵌样式的cart-total -->
      <div class="cart-total" style="font-size:18px; font-weight:bold; color:#28a745;">
        购物车总计：XXX
      </div>
    </div>
  `);
}

这种方式适合临时给单个元素加样式，不用额外写CSS代码。

2. 提前定义CSS类，动态添加时绑定类名 #

更推荐这种可复用的方案，先在你的CSS文件或者页面的<style>标签里定义好样式规则：

.cart-total {
  font-size: 18px;
  font-weight: bold;
  color: #28a745;
  padding: 10px 0;
  border-top: 1px solid #eee;
}

之后在动态生成HTML的时候，只要给目标div加上cart-total类名就可以了，和你原来的代码逻辑完全兼容：

if (json['success']) { 
  $('#content').parent().before(`
    <div class="alert alert-success">
      <i class="fa fa-check-circle"></i> ${json['success']}
      <button type="button" class="close" data-dismiss="alert">&times;</button>
      <div class="cart-total">
        购物车总计：XXX
      </div>
    </div>
  `);
}

这种方式便于后续统一修改样式，也符合结构与样式分离的最佳实践。

3. 用jQuery动态给已存在的cart-total元素设置样式 #

如果cart-total div已经提前存在于页面中，你只是想在触发success事件后修改它的样式，可以用jQuery的css()方法来操作：

if (json['success']) { 
  $('#content').parent().before(`
    <div class="alert alert-success">
      <i class="fa fa-check-circle"></i> ${json['success']}
      <button type="button" class="close" data-dismiss="alert">&times;</button>
    </div>
  `);
  // 给页面中已有的.cart-total设置样式
  $('.cart-total').css({
    'font-size': '18px',
    'font-weight': 'bold',
    'color': '#28a745'
  });
}

要是页面里有多个.cart-total元素，记得用更精准的选择器（比如结合父元素限定范围），避免误修改其他元素。

内容的提问来源于stack exchange，提问作者Mithu