Javascript CSS属性无效，由js getComputedStyle（）读取 问题/TLDR

如何命名CSS属性，以便

• javascript（例如

  window.getComputedStyle（元素）

  ，或

  jQuery.fn.css（）

  ）可以将其作为元素上当前活动的样式，但是
• 它对内容的显示方式没有影响
• （编辑：理想情况下，它应该具有良好的跨浏览器支持，感觉自然/不太随意。）

背景/用例 我正在编程一个响应选项卡/手风琴组件。 该组件应该附带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可以选择这一点，并应用区别手风琴和标签行为的更改

问题：

属性名“\uuu accordion”未知，被浏览器忽略，无法通过

getComputedStyle（）

访问

我考虑过的替代方案 我可以使用已知的属性名称，但这可能会产生不希望的效果

我可以使用“variable”语法（

--accordion

），但从技术上讲，这也有一定的效果，getComputedStyle（）不会使用它，我也不确定Internet Explorer会用它做什么（我们支持IE11，仅供参考）

我可以引入一个隐藏元素并提出一个虚构的约定，例如，如果隐藏元素是position:absolute，则显示手风琴，否则显示制表符。 这个想法与本文类似

隐藏的元素可以工作。但是我正在寻找一些不那么武断的东西，以使它更适合发布包。

更新：对SVG相关属性的支持比CSS变量更差。以下内容在Firefox上不起作用

正如我所评论的，您可以考虑仅在特定上下文中使用的属性，例如与Fracebox相关的属性。CSS网格，如果您确信您不会使用任何与SVG元素相关的属性，这些属性对普通元素不起作用，如“代码> x>代码/>代码> y>代码> >代码> >代码> >代码> >代码> > RX <代码> >代码> Ry/<代码> />代码> D >代码>等> /P>

$（'.supertabs'）。每个（函数（）{
console.log（window.getComputedStyle（this）.getPropertyValue（'cx'）+“”+window.getComputedStyle（this.x）
});
.supertabs{
cx:1；
x:2；
}
阿尔特先生{
cx:0；
x:5；
}
我自己做了一些测试

我们的目标是在浏览器之间保持一致的行为，并提供一些不太随意的东西


详细输出如下

我选择的解决方案
最好的解决方案似乎是
element:：before{content:'…'；}
，使用'window.getComputedStyle（element'：：before'）.getPropertyValue（'content'）读取

：:before
可以得到
显示：无
以确保内容无效

或者更好的是，把它放在一个嵌套的div上，它本身就是
display:none

这也是中建议的，只是他们直接在body元素上执行

请记住：该值将是双引号中的字符串值。即使在原始CSS中使用单引号，该值也将使用双引号。在大多数情况下，
JSON.parse（value）
应该删除引号，但我不确定这是否是100%通用的，例如，如果要在content属性中对复杂对象进行编码

我放弃的选项

content:
在非伪元素上

IE11不检测字符串值

--varname:
（css变量）：

IE11未检测到

未知属性

通常不在任何浏览器中工作

svg属性（“cx”）：

可能无法在某些旧浏览器上工作
IE11需要
['cx']
语法而不是
.getPropertyValue（'cx'）
没有语义，感觉随意
如果元素不是SVG，Firefox将丢弃该元素

其他模糊属性

没有语义，感觉随意


测试细节
（我认为这在这个网站上不起作用，但无论如何都要发布）
（函数（$）{
变量名称=[]；
var rules=document.styleSheets[1]。规则；
对于（变量iRule=0；iRule<代码> >代码>我认为只有在特定上下文中才有影响的属性。例如，“代码>网格间隙只考虑元素设置为代码>显示：网格< /代码>。如果您确信您将永远不会使用CSS网格，那么您可以使用它。也有其他与FixBox相关的属性，对于CSS变量，您需要一些东西。像这样；
window.getComputedStyle（div.getPropertyValue（'--example var'）
@temaniaf如果“网格间隙”感觉非常随意，并且在某些小范围内，有一个很小的机会