如何用jQuery获取CSS元素的桌面版样式值而非@media响应式值

要拿到非媒体查询下的原始样式值，直接用$().css()肯定不行——它只能返回当前浏览器生效的样式。这里给你两种靠谱的实现方式：

方法一：解析CSS样式表（推荐，无副作用） #

通过遍历页面所有样式表，筛选出目标选择器在非媒体查询块里的样式规则，直接提取属性值。代码示例：

function getDesktopStyle(selector, prop) {
    let targetValue = null;
    // 遍历所有样式表
    Array.from(document.styleSheets).forEach(sheet => {
        try {
            // 遍历当前样式表的所有规则
            Array.from(sheet.cssRules).forEach(rule => {
                // 跳过媒体查询规则，只处理普通样式规则
                if (rule.type !== CSSRule.MEDIA_RULE && rule.selectorText === selector) {
                    // 提取目标属性值
                    targetValue = rule.style[prop];
                }
            });
        } catch (e) {
            // 跨域样式表会抛出权限错误，直接跳过
            console.log('无法访问跨域样式表:', sheet.href);
        }
    });
    return targetValue;
}

// 使用示例
const fontWeight = getDesktopStyle('.my-css', 'fontWeight');
console.log(fontWeight); // 输出400

注意：如果样式表是跨域加载的，浏览器会限制访问cssRules，这种情况这个方法就用不了，得换下面的方案。

方法二：临时修改视口（有轻微副作用，谨慎用） #

临时把浏览器视口改成桌面版尺寸，获取样式后再改回去。这个方法会导致页面短暂闪一下，适合对体验要求不高的场景：

function getDesktopStyleTemp(selector, prop) {
    // 保存当前窗口宽度
    const originalWidth = window.innerWidth;
    // 强制设置窗口宽度为媒体查询阈值以上（比如725px）
    window.resizeTo(725, window.innerHeight);
    // 等待样式生效后获取值
    const targetValue = $(selector).css(prop);
    // 恢复原窗口尺寸
    window.resizeTo(originalWidth, window.innerHeight);
    return targetValue;
}

// 使用示例
const fontWeight = getDesktopStyleTemp('.my-css', 'font-weight');
console.log(fontWeight); // 输出400

注意：有些浏览器可能限制resizeTo的使用（比如全屏或受安全策略限制），而且页面会有短暂的尺寸变化，体验不好，所以优先用方法一。

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