如何在JavaScript中检测CSS的content值为mobile或desktop？

嘿，我来帮你搞定这个问题！先看看你现有代码里的几个小问题，然后给你修正后的实现方案。

你现有代码的核心问题 #

1. content值自带引号：浏览器通过getComputedStyle或jQuery的.css('content')返回的content值，是包含引号的（比如CSS里写content: "mobile"，实际返回的是"mobile"——带双引号的字符串），直接和"mobile"对比肯定不相等。
2. DOM ready的位置错误：你把$(document).ready()嵌套在了if/else条件里，这会导致只有满足条件时才会等待DOM加载，逻辑完全搞反了——应该先确保DOM完全加载，再执行判断逻辑。
3. 可能忽略伪元素场景：content属性通常是用在::before或::after伪元素上的，如果你的CSS是给伪元素设置的content，那直接获取元素本身的content值会是空的！

修正后的实现方案 #

分两种常见场景来处理：

场景1：content设置在元素本身（较少见）

$(document).ready(function() {
  const pushBtn = $('.push-button');
  // 获取content值并移除首尾的单/双引号
  const contentValue = pushBtn.css('content').replace(/^["']|["']$/g, '');

  if (contentValue === 'mobile') {
    $('.main').css('color', 'black');
  } else if (contentValue === 'desktop') {
    pushBtn.click(function() {
      $('.desktop-menu').slideToggle(1000);
      // 注：slideToggle会自动切换display状态，不需要额外设置display:block
    });
  }
});

场景2：content设置在伪元素上（更常见）

如果你的CSS是类似这样的：

.push-button::before {
  content: "mobile";
}

jQuery的.css()方法无法获取伪元素的样式，必须用原生的getComputedStyle来获取：

$(document).ready(function() {
  const pushBtnEl = document.querySelector('.push-button');
  // 指定伪元素（这里是:before，根据你的实际CSS改成:after）
  const computedStyle = getComputedStyle(pushBtnEl, ':before');
  const contentValue = computedStyle.content.replace(/^["']|["']$/g, '');

  if (contentValue === 'mobile') {
    $('.main').css('color', 'black');
  } else if (contentValue === 'desktop') {
    $('.push-button').click(function() {
      $('.desktop-menu').slideToggle(1000);
    });
  }
});

关键知识点提醒 #

• 引号处理：正则表达式/^["']|["']$/g可以精准匹配并移除字符串首尾的单引号或双引号，确保我们拿到纯净的mobile或desktop。
• DOM加载时机：所有操作DOM元素的代码都要放在$(document).ready()或原生DOMContentLoaded事件里，避免因为元素未加载导致获取失败。
• 伪元素特殊性：如果content是给伪元素设置的，一定要在getComputedStyle的第二个参数里指定伪元素类型（:before或:after）。

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