Web Basic

Web Basic

Posted by Shi

Services

DOM: document object model

CSS variable

Example 1

<button id="myBtn" value="dark" onClick="buttonClicked(this)">B1</button>

<script type="text/javascript">
  function buttonClicked(buttonElement) {
    // buttonElement.id == myBtn
  }
</script>

Example 2

<button value="dark">calm</button>

function handleThemeUpdate(e) {
  switch (e.target.value) {
    case "dark":
      root.style.setProperty("--bg", "black");
      root.style.setProperty("--bg-text", "white");
      break;
    case "calm":
      root.style.setProperty("--bg", "#B3E5FC");
      root.style.setProperty("--bg-text", "#37474F");
      break;
    case "light":
      root.style.setProperty("--bg", "white");
      root.style.setProperty("--bg-text", "black");
      break;
  }
}

body {
  background-color: var(--bg, #b3e5fc);
  color: var(--bg-text, #37474f);
  font-family: sans-serif;
  line-height: 1.3;
}