如何在JavaScript中获取自定义toggle切换开关的显示文本值

实现方案 #

你开关上的1x/2x是CSS伪元素根据checkbox的选中状态动态切换的，有两种常用的实现方式获取对应值：

方案1：直接根据checkbox选中状态判断（推荐，新手友好）

这个方法不需要读取CSS伪元素属性，逻辑更简单、性能更稳定，直接把下面的代码写入你的script.js即可：

// 获取页面中的开关checkbox元素
const toggleSwitch = document.querySelector('.switch input[type="checkbox"]');

// 定义获取开关当前显示文本的函数
function getToggleText() {
  // 选中状态对应2x，未选中对应1x，和你的CSS逻辑完全匹配
  return toggleSwitch.checked ? '2x' : '1x';
}

// 监听开关切换事件，切换时自动触发逻辑
toggleSwitch.addEventListener('change', () => {
  const currentText = getToggleText();
  // 控制台打印当前值
  console.log('当前开关值：', currentText);
  // 此处可编写你的自定义判断逻辑
  if (currentText === '2x') {
    console.log('执行2倍对应逻辑');
  } else {
    console.log('执行1倍对应逻辑');
  }
});

// 页面加载时可主动获取一次开关初始值
console.log('开关初始值：', getToggleText());

方案2：直接读取CSS伪元素的content值（适合需要和CSS内容严格同步的场景）

如果你后续可能修改CSS里的显示文本，不想同步修改JS里的硬编码值，可以用这个方法直接读取伪元素的实际渲染内容：

const toggleSwitch = document.querySelector('.switch input[type="checkbox"]');
const slider = document.querySelector('.slider');

function getToggleText() {
  // 读取.slider元素:before伪元素的content属性
  const content = window.getComputedStyle(slider, '::before').getPropertyValue('content');
  // 读取到的内容默认自带双引号，需要过滤掉
  return content.replace(/"/g, '');
}

toggleSwitch.addEventListener('change', () => {
  const currentText = getToggleText();
  console.log('当前开关值：', currentText);
});

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