通过 JQuery 定义 CSS - 只有一个元素答案

【问题标题】：Definition CSS via JQuery - only one element通过 JQuery 定义 CSS - 只有一个元素
【发布时间】：2022-01-03 15:44:03
【问题描述】：

我的代码：

.main-page-wrapper .side-nav > ul:nth-child(3) > li:first-child > a {
  font-size: 40px;
}

<div class="main-page-wrapper">
  <div class="side-nav">
  
    <ul>
      <li><a href="">1-1</a></li>
      <li><a href="">1-2</a></li>
    </ul>

    <ul>
      <li><a href="">2-1</a></li>
      <li><a href="">2-2</a></li>
    </ul>

    <ul>
      <li><a href="">3-1</a></li>
      <li><a href="">3-2</a></li>
    </ul>

  </div>
</div>

我需要什么：通过 CSS 将元素定义更改为通过 JQuery 定义此元素。有人帮忙吗？

【问题讨论】：

只需使用与 JQuery $('.main-page-wrapper .side-nav > ul:nth-child(3) > li:first-child > a').css('fontSize', '40px'); 相同的选择器。请注意，在脚本中，连字符被替换为 camelCase。

标签： javascript jquery css dom frontend

【解决方案1】：

有很多方法可以做到这一点

将样式直接添加到head或body标签

$("head").append('<style>.main-page-wrapper .side-nav > ul:nth-child(3) > li:first-child > a { font-size:40px; }</style>');

或

$("<style>").text(".main-page-wrapper .side-nav > ul:nth-child(3) > li:first-child > a { font-size:40px; }").appendTo(document.head);

或

重建风格

$(".main-page-wrapper .side-nav > ul:nth-child(3) > li:first-child > a").attr("style", "font-size:40px");

其中任何一个都可以完成这项工作。

【讨论】：

实用完美！
如果它对你有用，请选择它作为选择的答案。圣诞快乐