0

我将如何将 javascript 变量传递给 css 文件，这样 css 文件可以使用该变量来动态缩放页面。我已经想出了一个技巧，可以使用 REM 单元使用单个 javascript 变量来实现。

var i=128;
while (i--){
  document.write("<div id='divtoresize'></div>");
}
var HTML = document.getElementsByTagName('HTML')[0];
(input.onchange = function(){
    // changing the font-size of HTML changes the multiplier of the REM unit
    HTML.style.fontSize = input.value.toString() + "px";
})();
#divtoresize {
  background-color: red;
  /* the rem unit is the font-size of HTML */
  width: calc(.1rem + 1px);
  height: calc(.1rem + 1px);
  line-height: 0px;
  font-size: 0px;
  margin: 0px;
  padding: 0px;
  display: inline-block;
  
}
#input {
  width: calc(100% - 10px);
  position: absolute;
  top: 0px;
}
body {
white-space: pre-wrap;
  font-size: 1em; /* to prevent changes of HTML from being inherited by the body */
}
<input id="input" type="range" min="0" max="200" value="20" />

这个问题似乎是一个无关紧要的问题，你可以用更多的 javascript，更少的 CSS 来解决它。但是，当页面布局变得很大并且每次光标移动时需要更新的元素数量增长到数百个时，由于所有滞后，javascript（尤其是如果您使用的是 JQuery）变得越来越不实用。

我已经知道有一些 CSS 变量非常适合这个。然而，仅仅看一眼 IE 中 CSS 变量的 polyfill 就让我畏缩不前，以至于我在心里找到了对 IE 的怜悯。那么，是否有任何替代 CSS 变量的方法来允许将多个变量传递给 CSS？

另外，我不是在寻找 LESS 或任何其他预处理器，而是在寻找纯 CSS。像 LESS 这样的事情在皮肤下使用 javascript，我发布这篇文章是为了避免。

澄清：澄清一下，这个问题的最终目标是找到一些方法来执行更少的 DOM 操作以获得更好的性能。

澄清 #2：是的，可以更有效地对演示进行编码。这就是为什么它是一个演示：以更简单的方式演示我的问题。

4

0 回答 0