gpt4 book ai didi

JavaScript 测试 CSS 样式表是否应用了 CSS3 媒体查询

转载 作者:行者123 更新时间:2023-11-29 20:13:49 29 4
gpt4 key购买 nike

我有两个样式表:

<link rel="stylesheet" type="text/css" href="/core.css" media="screen" />
<link rel="stylesheet" type="text/css" href="/core-desktop.css" media="only screen and (min-width: 800px)" id="css-desktop" />

第二个应该只在窗口为 800 像素或更宽时加载(较窄的显示布局更适合移动设备)。

JavaScript 需要知道是否应用了第二个样式表,我已经尝试过 jQuery:

($(window).width() > 800)

但是当您达到 790 - 810px 宽度时,Chrome/Firefox(可能还有其他)将返回一个值,例如 791,并且 800px+ 样式表仍将被加载。

我怀疑这是由于滚动条造成的(但定位 $(document) 或 $('html') 要么不起作用,要么是相同的)。

那么有没有办法测试 $('#css-desktop') 是否启用/激活/使用?

最佳答案

您可以执行以下操作。

  1. 在第一个样式表中制作一个具有 display: none; 的 div,因此它不会显示。
  2. 在第二个样式表中,您将添加一个position: absolute
  3. 在你的 Javascript 中检查 if( $("#thediv").css("position") == "absolute")

position: absolute; 仅应用于第二个样式表。

关于JavaScript 测试 CSS 样式表是否应用了 CSS3 媒体查询,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/8201030/

29 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com