jquery 获取主 css 值而不是当前的 @media/mobile 值

Question

我几乎不发帖，因为我通常可以找到答案，但我已经搜索了几个小时，而且我的头感觉要爆炸了......无论如何

我正在寻找 css 元素的“桌面”版本的 css 值，但我不想要 @media/responsive 值，例如

.my-css {

  font-weight: 400; /* Desktop version */

}

@media only screen and (max-width: 724px) {

    .my-css {

      font-weight: 200; /* responsive version */

    }
}

现在我希望我的jquery获得桌面版本而不是响应版本，所以即使响应版本是当前屏幕版本我仍然想要桌面版本的值，所以

var FontWeight = $('.my-css').css('font-weight'); /* 400 NOT 200 */

有办法做到这一点吗？

提前谢谢您

Answer 1

一个（无jquery）选项是遍历

document.styleSheets

（这是一个简化版本，投资于更深入的学习）

for (let sheet of document.styleSheets)
  for (let i of sheet.cssRules)
    if (i.selectorText === '.my-css')
      console.log(i.style.fontWeight)

.my-css {
  font-weight: 900;
  /* Desktop version */
}

@media only screen and (max-width: 724px) {
  .my-css {
    font-weight: 200;
    /* responsive version */
  }
}

<i class="my-css">XOXO</i>

另一种选择是使用

css variables

console.log(
  $('.my-css').css('--desktop-font-weight')
)

:root {
  --desktop-font-weight: 900;
  --mobile-font-weight: 200;
}

.my-css {
  font-weight: var(--desktop-font-weight);
  /* Desktop version */
}

@media only screen and (max-width: 724px) {
  .my-css {
    font-weight: var(--mobile-font-weight);
    /* responsive version */
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<i class="my-css">XOXO</i>