主页 / coding / 问题 / 79151566
Accepted
bbunlock
Asked: 2024-11-03 04:50:01 +0800 CST

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

  • 772

我很少发帖，因为我通常可以找到答案，但我已经搜索了几个小时，我的头感觉好像要爆裂了……无论如何

我正在寻找获取 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 */

有办法吗？

先感谢您

jquery

1 个回答

  1. Best Answer

    一个（没有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')
)
    .my-css {
  --desktop-font-weight: 900;
  --mobile-font-weight: 200;

  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>

    • 1

相关问题