如何为jQuery对象中存储的动态创建DOM元素单独设置样式

你存储在对象中的每个属性值本身就是jQuery实例化的DOM对象，直接调用jQuery提供的样式操作方法即可，以下是不同场景的实现方式：

• 场景1：遍历单个对象，批量给元素设置样式，可按属性名区分差异化样式

jQuery.each(obj1, function(key, $elem) {
  // 所有元素通用样式
  $elem.css('margin', '8px 0')

  // 按属性名匹配设置专属样式
  switch(key) {
    case 'name':
      $elem.css({
        'color': 'orange',
        'font-size': '20px',
        'font-weight': 'bold'
      })
      break
    case 'price':
      $elem.css({
        'color': 'red',
        'padding-left': '10px'
      })
      // 也可以添加预设类名，比行内样式更易维护
      // $elem.addClass('price-highlight')
      break
    case 'details':
    case 'details2':
      $elem.css({
        'padding': '12px',
        'border': '1px solid #eee',
        'border-radius': '4px'
      })
      // 直接操作元素内的子元素样式
      $elem.find('p').css('margin', '4px 0')
      break
  }
})

• 场景2：给不同对象的同属性元素设置差异化样式
  不需要遍历，直接通过属性名访问元素设置即可：

// 给obj1的name设置样式
obj1.name.css('text-decoration', 'underline')
// 给obj2的name设置不同的样式
obj2.name.css('color', 'blue')

// 单独给obj2的price设置样式
obj2.price.css('font-size', '18px')

• 场景3：批量处理两个对象的所有元素
  可以把两个对象放入数组统一遍历：

const targetObjs = [obj1, obj2]
targetObjs.forEach((obj, idx) => {
  jQuery.each(obj, (key, $elem) => {
    // 给第二个对象obj2的所有元素加专属背景样式
    if (idx === 1) {
      $elem.css('background', '#f8f9fa')
    }
  })
})

如果需要长期维护样式，更推荐提前在CSS文件中定义对应的类名，通过.addClass()方法给元素绑定类，避免大量行内样式难以修改。

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