Javascript 我的js脚本会在传统浏览器上设置css——变量吗？

我想开始使用css——变量。对于传统浏览器，css的退路是首先声明一个传统规则，这很好。然后我将通过javascript操作它们。那么，它会破坏脚本并在传统浏览器中抛出一些错误吗？我问这个问题是因为我目前无法对遗留问题进行测试，所以我自己也看不见

我是说，如果我这样做：

elem.style.setProperty('--tx', `10px`);

在传统浏览器中会发生什么？只是什么都没有（--tx不会自动更新，程序将继续）或者，抛出错误并中断脚本？

根据，在以下情况下，可以抛出错误：

SYNTAX_ERR：如果指定的值有语法错误且不可解析，则引发

无\u修改\u允许\u错误：如果此声明为只读或属性为只读，则引发此错误

如果希望安全，请将调用包装在或基于的条件中，以确保在旧浏览器中引发异常时捕获调用，或者仅在浏览器支持时调用调用

---

我还建议您不要使用Babel使用它或将其传输到ES5。

对我来说，我的问题的答案是否定的，它不会破坏javascript。不过，对于不支持变量的浏览器，您仍然需要处理css代码。具体地说，令人遗憾的是，微软Edge确实支持它们，但在某些情况下无法正确处理它们。这使得它比IE11更容易出错，IE11只是忽略了它们

考虑以下代码：

  @for $i from 1 through 20{
    // first for legacy browsers
    &[data-current="#{$i}"]{ transform: translateX(-100% * ($i - 1)); }
    // then for modern ones
    &[data-current="#{$i}"]{ transform: translate(calc(-100% * (#{$i} - 1) + var(--distance))); }
  }

这是：

hm.on('pan', function(e){ // (hammer.js)
  slide_strip.style.setProperty('--distance', e.deltaX + 'px');
});

在Android浏览器4.4.2、IE11和Edge上测试。 Android 4.4.2和IE11不支持--variables。Edge不支持它们，但在传递给转换的calc（）中不支持

行为：

• Android 4.4.2和IE11:js将不会设置

  --distance

  ，而不会抛出任何错误，它们将使用第一个css规则（由于刷卡事件的数据当前更新>为简单起见，此处未显示）。因此，这一切都将作为后备措施

• Edge:js不会抛出任何错误。浏览器将读取第二条css规则，但无法处理它，结果将是运动冻结。所以这里应该有一些称呼。就我个人而言，我会使用一个工具来检测浏览器类型，在body中添加一个相关的类，并在此基础上映射不同的css规则

关于w3c规范，我想指出：

SYNTAX_ERR：如果指定的值有语法错误且为 无可比拟

在这种情况下，我们谈论的是价值，而不是财产。此外，该值没有任何语法错误

无\u修改\u允许\u错误：如果此声明为只读或 该属性是只读的

---

该属性不是只读的，或者，它不能被告知（如果浏览器不支持i，它现在就不支持i）。我想

尝试一下：

elem.style.setProperty（'notarealproperty'，'10px'）

对于不支持--tx的传统浏览器，就好像您向它传递了胡言乱语一样。所以把胡言乱语传给它，看看会发生什么。那应该没问题。根据

HTMLElement.style.setProperty（）

将

DOMString

作为第一个参数（它似乎简单地直接转换为一个简单的

String

）。顺便说一句，

--tx

似乎不是一个直观的变量名称。当传统浏览器看到无法计算的变量时，它只是跳过该属性。你的后备方案应该很有效。请看下面我的答案。事实上，javascript不会抛出任何错误。我从未声称它在您的特定情况下必然会抛出错误。我为一般情况提供了答案。就我的问题而言，我认为它不适用于一般情况。因为规范中详细说明的错误与只读属性（css道具不是只读的）和不可解析或有语法错误的值（不是属性）有关。我认为在旧浏览器上尝试更改--css属性时，这些情况都不适用。请仔细阅读我的评论。设置CSS变量是

setProperty（）

方法的一个非常特殊的用法。一般情况是指“任何输入”。这个答案的要点是，规范的相关部分在这里是为了让您对您的特定用例做出自己的逻辑推断。那么您的答案并不能真正回答主要问题，因此您应该将您的答案移动到注释中，或者用这些新的解释更新它。