如何将指定单个元素的CSS样式定义改为通过jQuery实现

你只需要按以下操作即可完成CSS样式到jQuery动态设置的转换： #

1. 确保页面已引入jQuery库 #

在执行后续代码前，确认页面已经正确加载jQuery依赖。

2. 编写jQuery样式设置代码 #

你原来的CSS选择器可以直接在jQuery中复用，只需要调用.css()方法设置对应样式即可，建议把代码放在DOM加载完成的回调中，避免元素未渲染导致的选择器失效问题：

// 等待DOM全部加载完成后执行
$(function() {
  // 复用原CSS选择器选中目标元素，设置font-size样式
  $('.main-page-wrapper .side-nav > ul:nth-child(3) > li:first-child > a').css('font-size', '40px');
})

补充说明 #

如果需要同时设置多个样式，可给.css()方法传入样式对象，示例如下：

$(function() {
  $('.main-page-wrapper .side-nav > ul:nth-child(3) > li:first-child > a').css({
    'font-size': '40px',
    // 可继续追加其他样式属性
    'font-weight': 'bold',
    'color': '#333'
  })
})

该方式设置的是元素的内联样式，权重和你原有CSS规则的效果一致，会作用在对应目标元素上。

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