javascript - 没有效果的 CSS 属性，由 js getComputedStyle() 读取

Question

问题/TLDR

我将如何命名 CSS 属性以便

• 它可以被 javascript(例如 window.getComputedStyle(element)，或 jQuery.fn.css())作为元素上的当前事件样式, 但是
• 它对内容的显示方式没有影响？
• (编辑:理想情况下它应该具有良好的跨浏览器支持并且感觉自然/不太随意。)

背景/用例

我正在编写响应式选项卡/ Accordion 组件。该组件应附带 js 和 css。但断点应该定义在站点特定的 CSS 中，即包外的 CSS 文件中。

想法:

站点特定的 CSS 包含这样的规则:

@media only screen and (max-width: 768px) {
  // I want this CSS to feel natural, semantic, and memorable.
  .supertabs {
    __accordion: 1;  /* This is ignored by the browser, see "Problem" below. */
  }
}

在 javascript 中我会这样选择:

// Use jQuery to make this code look simpler.
var $ = jQuery;
$(window).resize(function () {
  $('.supertabs').each(function () {
    // Won't work, because '__accordion' is not a known CSS property name.
    if (window.getComputedStyle(this).__accordion) {
      // Enable accordion.
      $(this).addClass('supertabs-accordion');
      $(this).removeClass('supertabs-tabs');
    }
    else {
      // Enable tabs.
      $(this).removeClass('supertabs-accordion');
      $(this).addClass('supertabs-tabs');
    }
  });
});

然后 CSS 包可以选择它并应用区分 Accordion 和标签行为的更改。

问题:

属性名称“__accordion”未知，被浏览器忽略，并且无法使用 getComputedStyle() 访问。

我考虑过的备选方案

我可以使用已知的属性名称，但这可能会产生不良影响。

我可以使用“可变”语法 (--accordion)，但从技术上讲这也有效果，它不会被 getComputedStyle() 拾取，我完全不确定是什么Internet Explorer 会处理它(我们支持 IE11，仅供引用)。

我可以引入一个隐藏元素并想出一个虚构的约定，例如如果隐藏元素是 position:absolute，则显示 Accordion ，否则显示制表符。思路类似于这篇文章，https://www.lullabot.com/articles/importing-css-breakpoints-into-javascript .

隐藏元素会起作用。但我一直在寻找不那么随意的东西，以使其更适合要发布的包。

Answer 1

更新:对SVG相关属性的支持比CSS变量差。以下内容不适用于 Firefox。

正如我评论的那样，您可以考虑使用仅在特定上下文中定义的属性，例如与 Flexbox、CSS 网格相关的属性，如果您确定不会使用它们中的任何一个，或者考虑与 SVG 元素相关的属性对x/y/cx/cy/rx等常见元素没有影响>/ry/d 等

$('.supertabs').each(function() {
  console.log(window.getComputedStyle(this).getPropertyValue('cx') +" "+ window.getComputedStyle(this).x)
});

.supertabs {
  cx: 1;
  x: 2;
}

.alt {
  cx: 0;
  x: 5;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="supertabs"></div>
<div class="supertabs"></div>
<div class="supertabs alt"></div>
<div class="supertabs"></div>

作为 CSS 变量的旁注，您需要使用 window.getComputedStyle().getPropertyValue('--var')

$('.supertabs').each(function() {
  console.log(window.getComputedStyle(this).getPropertyValue('--var'))
});

.supertabs {
  --var:1;
}

.alt {
  --var:0;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="supertabs"></div>
<div class="supertabs"></div>
<div class="supertabs alt"></div>
<div class="supertabs"></div>