Dynamically Scaling Style Sheets Via Passing Javascript Variables -> CSS

Question

How exactly would I pass a javascript variable to a css file in such as that, the css file can use that variable to scale the page dynamically. I have already figured out a hack to do it with a single javascript variable using the REM unit.

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" />

This question may seem like an insignificant issue which you can brush off with more javascript, less CSS. However, when the page layouts get big and the number of elements that need to be updated each time the cursor moves grows into the hundreds, javascript (especially if you are using JQuery) becomes less and less practical because of all the lag.

I already know that there are CSS variables which would be perfect for this. However, just glancing at the polyfill for CSS variables in IE makes me cringe so much that I have found mercy for IE in my heart. So, are there any alternatives to CSS variables for this that allow more than one variable to be passed to the CSS?

Also, I am not looking for LESS or any other preprocessors, rather I am looking for pure CSS. Things like LESS use javascript under the skin in a way I am posting this post to avoid.

CLARIFICATION: To clarify, the end goal of this question is to find some way to perform less DOM operations for better performance.

CLARIFICATION #2: Yes, the demo could be coded a lot more efficiently. Thats why its a demo: to demonstrate my problem in a simpler way.

The only way I know of "passing a variable" from javascript to css is through modifying the contents of a style tag. I see no reason for doing that, however, as you can always have a static css file with different classes, and you can use javascript to switch between classes rather than modify the css itself. — Pyromonk, Apr 25 '17 at 23:54
That is what this question is about: a work-around for mass styling with less DOM operations for better performance — , Apr 25 '17 at 23:55
I would personally have a single css file with lots of classes for different purposes and switch between those classes through javascript/jQuery. This is one of the reasons why classes are there, as far as my understanding goes. — Pyromonk, Apr 25 '17 at 23:57
So, I should have thousands of classes to anticipate every value. I don't thinks so. Run the demo, and look at the code. Then, you will see what I mean. — , Apr 25 '17 at 23:58
Not certain what issue is? Are you trying to adjust `font-size` of all elements in `document`? — guest271314, Apr 25 '17 at 23:59
I have done that prior to commenting on your question, and I've done it again because you've asked me to. I still don't understand what the issue is. I will step aside and let someone who has more of an idea help you. My apologies. — Pyromonk, Apr 26 '17 at 00:05
_"To clarify, the end goal of this question is to find some way to perform less DOM operations for better performance"_ Which specific operations are you trying to perform? Is requirement to adjust `css` property of an element at `css` file loaded into `document`? — guest271314, Apr 26 '17 at 00:11
I have to concur with the others here… It's hard to understand what you're trying to achieve specifically. Since it's basically impossible to pass JavaScript to CSS, it would be useful to know exactly what you're trying to achieve so we could suggest some concrete alternatives that might be useful to solve your problem. :) — Yann, Apr 26 '17 at 02:11

Dynamically Scaling Style Sheets Via Passing Javascript Variables -> CSS

0 Answers0