如何结合JavaScript条件应用媒体查询内的CSS样式？

方案1（推荐，性能最优）：给CSS增加前置类限定 #

仅需要修改你现有CSS的选择器，在所有组织结构图相关的选择器前加一个自定义类前缀（比如org-chart-enabled），修改后代码如下：

@media only screen and ( min-width: 64em ) {
    .org-chart-enabled ol.organizational-chart {
        margin-left: -1em;
        margin-right: -1em;
    }
    /* PRIMARY */
    .org-chart-enabled ol.organizational-chart > li > div {
        display: inline-block;
        float: none;
        margin: 0 1em 1em 1em;
        vertical-align: bottom;
    }
    .org-chart-enabled ol.organizational-chart > li > div:only-of-type {
        margin-bottom: 0;
        width: calc((100% / 1) - 2em - 4px);
    }
    .org-chart-enabled ol.organizational-chart > li > div:first-of-type:nth-last-of-type(2),
    .org-chart-enabled ol.organizational-chart > li > div:first-of-type:nth-last-of-type(2) ~ div {
        width: calc((100% / 2) - 2em - 4px);
    }
    .org-chart-enabled ol.organizational-chart > li > div:first-of-type:nth-last-of-type(3),
    .org-chart-enabled ol.organizational-chart > li > div:first-of-type:nth-last-of-type(3) ~ div {
        width: calc((100% / 3) - 2em - 4px);
    }
    .org-chart-enabled ol.organizational-chart > li > div:first-of-type:nth-last-of-type(4),
    .org-chart-enabled ol.organizational-chart > li > div:first-of-type:nth-last-of-type(4) ~ div {
        width: calc((100% / 4) - 2em - 4px);
    }
    .org-chart-enabled ol.organizational-chart > li > div:first-of-type:nth-last-of-type(5),
    .org-chart-enabled ol.organizational-chart > li > div:first-of-type:nth-last-of-type(5) ~ div {
        width: calc((100% / 5) - 2em - 4px);
    }
    /* SECONDARY */
    .org-chart-enabled ol.organizational-chart > li > ol {
        display: flex;
        flex-wrap: nowrap;
    }
    .org-chart-enabled ol.organizational-chart > li > ol:before,
    .org-chart-enabled ol.organizational-chart > li > ol > li:before {
        height: 1em!important;
        left: 50%!important;
        top: 0!important;
        width: 3px!important;
    }
    .org-chart-enabled ol.organizational-chart > li > ol:after {
        display: none;
    }
}

之后在JavaScript侧控制类名的增减即可：

if (/* 你的判断条件 */) {
  // 给body或组织结构图的父容器添加类，即可生效样式
  document.body.classList.add('org-chart-enabled')
} else {
  // 移除类即可取消样式
  document.body.classList.remove('org-chart-enabled')
}

方案2：动态插入/移除style标签 #

如果不想修改原有CSS代码，可以用JS直接控制样式的挂载：

function toggleOrgChartStyle(isEnable) {
  const STYLE_ID = 'org-chart-custom-style'
  // 先清理已存在的样式标签
  const existStyle = document.getElementById(STYLE_ID)
  existStyle && existStyle.remove()
  
  if (!isEnable) return
  // 动态创建样式标签插入页面
  const style = document.createElement('style')
  style.id = STYLE_ID
  style.textContent = `
    @media only screen and ( min-width: 64em ) {
      ol.organizational-chart {
          margin-left: -1em;
          margin-right: -1em;
      }
      /* PRIMARY */
      ol.organizational-chart > li > div {
          display: inline-block;
          float: none;
          margin: 0 1em 1em 1em;
          vertical-align: bottom;
      }
      ol.organizational-chart > li > div:only-of-type {
          margin-bottom: 0;
          width: calc((100% / 1) - 2em - 4px);
      }
      ol.organizational-chart > li > div:first-of-type:nth-last-of-type(2),
      ol.organizational-chart > li > div:first-of-type:nth-last-of-type(2) ~ div {
          width: calc((100% / 2) - 2em - 4px);
      }
      ol.organizational-chart > li > div:first-of-type:nth-last-of-type(3),
      ol.organizational-chart > li > div:first-of-type:nth-last-of-type(3) ~ div {
          width: calc((100% / 3) - 2em - 4px);
      }
      ol.organizational-chart > li > div:first-of-type:nth-last-of-type(4),
      ol.organizational-chart > li > div:first-of-type:nth-last-of-type(4) ~ div {
          width: calc((100% / 4) - 2em - 4px);
      }
      ol.organizational-chart > li > div:first-of-type:nth-last-of-type(5),
      ol.organizational-chart > li > div:first-of-type:nth-last-of-type(5) ~ div {
          width: calc((100% / 5) - 2em - 4px);
      }
      /* SECONDARY */
      ol.organizational-chart > li > ol {
          display: flex;
          flex-wrap: nowrap;
      }
      ol.organizational-chart > li > ol:before,
      ol.organizational-chart > li > ol > li:before {
          height: 1em!important;
          left: 50%!important;
          top: 0!important;
          width: 3px!important;
      }
      ol.organizational-chart > li > ol:after {
          display: none;
      }
    }
  `
  document.head.appendChild(style)
}

// 调用示例：条件成立传true，不成立传false
toggleOrgChartStyle(/* 你的判断条件 */)

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