How do you control CSS Property Values with Javascript Variables?

Question

I'm trying to use a slider to control the font-weight value of the text on the page.

I'm trying to link the value of the slider to control the font-weight property in my h1 an h2s.

Below is my attempt that has yielded no luck. How do I better approach this ? Thanks in Advance ! :)

How do I go about controlling the font-weight of h1 and h2 using the values I get from the CSS Slider ?

var slider = document.getElementById("myRange");
var output = document.getElementById("demo");
output.innerHTML = slider.value; // Display the default slider value

// Update the current slider value (each time you drag the slider handle)
slider.oninput = function() {
  output.innerHTML = this.value;
}

  @font-face {
  font-family: 'spartanthin';
  src: url('fonts/SpartanUnconv/Spartan-VariableFont_wght.ttf');
  font-weight: 100 900;
  font-style: normal;
  }

  h1 {
  font-family: 'spartanthin';
  font-weight: "this.value";
  }

  h2 {
  font-family: 'spartanthin';
  font-weight: 100;
  }

  .slidecontainer {
  width: 100%;
  /* Width of the outside container */
  }


  /* The slider itself */

  .slider {
  -webkit-appearance: none;
  /* Override default CSS styles */
  appearance: none;
  width: 100%;
  /* Full-width */
  height: 1.5px;
  /* Specified height */
  background: #d3d3d3;
  /* Grey background */
  outline: none;
  /* Remove outline */
  opacity: 0.7;
  /* Set transparency (for mouse-over effects on hover) */
  -webkit-transition: .2s;
  /* 0.2 seconds transition on hover */
  transition: opacity .2s;
  }


  /* Mouse-over effects */

  .slider:hover {
  opacity: 1;
  /* Fully shown on mouse-over */
  }


  /* The slider handle (use -webkit- (Chrome, Opera, Safari, Edge) and -moz- (Firefox) to override default look) */

  .slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  /* Override default look */
  appearance: none;
  width: 2.5px;
  /* Set a specific slider handle width */
  height: 2.5px;
  /* Slider handle height */
  background: #4CAF50;
  /* Green background */
  cursor: pointer;
  /* Cursor on hover */
  }

  .slider::-moz-range-thumb {
  width: 25px;
  /* Set a specific slider handle width */
  height: 25px;
  /* Slider handle height */
  background: #4CAF50;
  /* Green background */
  cursor: pointer;
  /* Cursor on hover */
  }

  p {
  margin-top: 50px;
  opacity: 0.7;
  }

    <!DOCTYPE html>
<html>

<head>
    <title>TEST</title>
    <link rel="stylesheet" href="design.css">

</head>

<!-- body tag starts here -->

<body text="green">
    <center>
        <h1>ABCDEFGH</h1>

        <div class="slidecontainer">
            <input type="range" min="100" max="900" value="100" class="slider" id="myRange">
            <p>Weight: <span id="demo"></span></p>
        </div>
    </center>

    <center>
        <h2>ABCDEFGH</h2>

    </center>

</body>
<!-- body tag ends here -->
<script src="python2java.js"></script>

</html>

You can either apply a style directly to the elements (e.g. [*Changing element style attribute dynamically using JavaScript*](https://stackoverflow.com/questions/5191478/changing-element-style-attribute-dynamically-using-javascript)), or modify a CSS rule, say a class that selects the required elements (e.g. [*Changing a CSS rule-set from Javascript*](https://stackoverflow.com/questions/1409225/changing-a-css-rule-set-from-javascript)). — RobG, Jun 08 '20 at 00:09
Note that it is invalid to put a script element after the closing body tag. It works though because browsers will correct the DOM and put the script element at the end of the body. Just move the closing body tag to after the closing script tag. — RobG, Jun 08 '20 at 00:11

score 0 · Accepted Answer · answered Jun 08 '20 at 00:31

You can either change the font-weight using el.style.fontWeight= this.value; or you can CSS custom properties like so:

let root = document.documentElement;
var slider = document.getElementById("myRange");
var output = document.getElementById("demo");
output.innerHTML = slider.value; // Display the default slider value

// Update the current slider value (each time you drag the slider handle)
slider.oninput = function() {
  output.innerHTML = this.value;
  // update value on slider change
  root.style.setProperty('--font-weight', this.value);
}

/* Add variables under root*/

:root {
  --font-weight: 100;
}

@font-face {
  font-family: 'spartanthin';
  src: url('fonts/SpartanUnconv/Spartan-VariableFont_wght.ttf');
  font-weight: 100 900;
  font-style: normal;
}

h1 {
  font-family: 'spartanthin';
  /* property to value*/
  font-weight: var(--font-weight);
}

h2 {
  font-family: 'spartanthin';
  font-weight: 100;
}

.slidecontainer {
  width: 100%;
  /* Width of the outside container */
}


/* The slider itself */

.slider {
  -webkit-appearance: none;
  /* Override default CSS styles */
  appearance: none;
  width: 100%;
  /* Full-width */
  height: 1.5px;
  /* Specified height */
  background: #d3d3d3;
  /* Grey background */
  outline: none;
  /* Remove outline */
  opacity: 0.7;
  /* Set transparency (for mouse-over effects on hover) */
  -webkit-transition: .2s;
  /* 0.2 seconds transition on hover */
  transition: opacity .2s;
}


/* Mouse-over effects */

.slider:hover {
  opacity: 1;
  /* Fully shown on mouse-over */
}


/* The slider handle (use -webkit- (Chrome, Opera, Safari, Edge) and -moz- (Firefox) to override default look) */

.slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  /* Override default look */
  appearance: none;
  width: 2.5px;
  /* Set a specific slider handle width */
  height: 2.5px;
  /* Slider handle height */
  background: #4CAF50;
  /* Green background */
  cursor: pointer;
  /* Cursor on hover */
}

.slider::-moz-range-thumb {
  width: 25px;
  /* Set a specific slider handle width */
  height: 25px;
  /* Slider handle height */
  background: #4CAF50;
  /* Green background */
  cursor: pointer;
  /* Cursor on hover */
}

<center>

  <h1>ABCDEFGH</h1>

  <div class="slidecontainer">
    <input type="range" min="100" max="900" value="100" class="slider" id="myRange">
    <p>Weight: <span id="demo"></span></p>
  </div>


</center>

<center>


  <h2>ABCDEFGH</h2>


</center>

score 0 · Answer 2 · answered Jun 08 '20 at 01:13

Another option is to manipulate the classlist of the element. This means either adding or removing a CSS class to an element in javascript. More information here https://alligator.io/js/classlist/ . This is my favorite way because you never have to actually change the styles and all styling stays in the CSS.

How do you control CSS Property Values with Javascript Variables?

2 Answers2