动态控制<style>标签生效状态：Chrome有效，IE11、Safari失效求解决

嘿，我之前也踩过这个兼容性坑！Chrome对修改style标签的type属性支持比较宽松，但IE11和Safari确实不认这一套——它们加载完style标签后，不会再重新解析type属性的变化，所以你的切换逻辑在这俩浏览器里直接失效了。

给你几个不用MVVM框架就能搞定的方案，完美适配你的需求（比如根据语言切换样式）：

方案1：用disabled属性替代type属性（最推荐） #

所有主流浏览器（包括IE11、Safari）都支持style标签的disabled属性：设置为true时禁用样式，false时启用。我们可以给两个style标签加ID，通过切换它们的disabled状态来实现样式切换，逻辑简单且兼容性拉满。

示例代码：

<h1>测试样式切换</h1>
<button id="toggleStyleBtn">切换字体大小</button>

<!-- 初始禁用小字体样式 -->
<style id="styleSmall" disabled>
  h1 { font-size: 20px; }
</style>
<!-- 初始启用大字体样式 -->
<style id="styleLarge">
  h1 { font-size: 40px; }
</style>

<script>
  const toggleBtn = document.getElementById('toggleStyleBtn');
  const styleSmall = document.getElementById('styleSmall');
  const styleLarge = document.getElementById('styleLarge');

  toggleBtn.addEventListener('click', () => {
    // 互斥切换disabled状态
    styleSmall.disabled = !styleSmall.disabled;
    styleLarge.disabled = !styleLarge.disabled;
  });
</script>

如果是根据语言切换，只需要把点击事件改成语言判断逻辑就行，比如：

// 假设当前语言存在lang变量中
function switchStyleByLang(lang) {
  // 比如中文用小字体，英文用大字体
  styleSmall.disabled = lang !== 'zh';
  styleLarge.disabled = lang !== 'en';
}

方案2：动态替换style标签的内容 #

如果不想维护多个style标签，可以把不同场景的样式存在变量里，根据条件直接替换style标签的innerHTML。这种方式适合样式内容不多的场景。

示例代码：

<h1>测试样式切换</h1>
<button id="toggleStyleBtn">切换字体大小</button>

<style id="dynamicStyle">
  h1 { font-size: 40px; }
</style>

<script>
  const toggleBtn = document.getElementById('toggleStyleBtn');
  const dynamicStyle = document.getElementById('dynamicStyle');
  
  // 存储不同样式内容
  const styleMap = {
    zh: 'h1 { font-size: 20px; }',
    en: 'h1 { font-size: 40px; }'
  };

  // 根据语言切换样式
  function switchStyleByLang(lang) {
    dynamicStyle.innerHTML = styleMap[lang] || styleMap.en;
  }

  // 按钮切换演示
  toggleBtn.addEventListener('click', () => {
    const currentLang = dynamicStyle.innerHTML.includes('20px') ? 'en' : 'zh';
    switchStyleByLang(currentLang);
  });
</script>

方案3：切换外部样式表的disabled状态 #

如果你的样式是放在外部CSS文件里的（比如zh-style.css和en-style.css），可以用两个link标签，通过切换它们的disabled状态来切换整个样式表，这种方式适合样式较多、需要拆分维护的场景。

示例代码：

<link id="cssZh" rel="stylesheet" href="zh-style.css">
<link id="cssEn" rel="stylesheet" href="en-style.css" disabled>

<script>
  function switchStyleByLang(lang) {
    document.getElementById('cssZh').disabled = lang !== 'zh';
    document.getElementById('cssEn').disabled = lang !== 'en';
  }

  // 比如页面加载时根据当前语言自动切换
  const currentLang = navigator.language.includes('zh') ? 'zh' : 'en';
  switchStyleByLang(currentLang);
</script>

以上三个方案都不需要依赖任何MVVM框架，纯原生JS就能实现，完全适配你的需求。其中方案1是最直接且兼容性最好的，优先推荐使用！

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