JSFiddle - React, Tailwind, and code Playground

CSS variables test with changing height/width on element

by Travis Almand

HTML

<button id="width">width</button>
<button id="height">height</button>

<div id="box"></div>

CSS

:root {
  --height: 50px;
  --width: 50px;
}

#box {
  background: green;
  bottom: 0;
  color: white;
  font-family: sans-serif;
  font-size: 10px;
  height: var(--height);
  left: 0;
  line-height: var(--height);
  margin: auto;
  position: absolute;
  right: 0;
  text-align: center;
  top: 0;
  transition: all 0.25s cubic-bezier(.17,.67,.2,1.36);
  width: var(--width);
}

JavaScript

var $box = document.querySelector('#box');
var $width = document.querySelector('#width');
var $height = document.querySelector('#height');

$width.addEventListener('click', function () {
	var current = window.getComputedStyle(document.body).getPropertyValue('--width');
  
  $box.textContent = 'width';
  
  if (current === '200px') {
  	document.documentElement.style.setProperty(`--width`, '100px');
  } else {
  	document.documentElement.style.setProperty(`--width`, '200px');
  }
});

$height.addEventListener('click', function () {
	var current = window.getComputedStyle(document.body).getPropertyValue('--height');
  
  $box.textContent = 'height';
  
  if (current === '200px') {
  	document.documentElement.style.setProperty(`--height`, '100px');
  } else {
  	document.documentElement.style.setProperty(`--height`, '200px');
  }
});