使用 javascript 动态更新 css 内容

Question

需要将 css 更新为动态值，我不确定最好的方法是什么。

<div id="app" style="zoom: 0.XX;">
  ...
</div>

缩放级别将根据窗口调整大小触发，应用程序将相应缩放。我将此应用程序加载到cordova并让它在iPAD中运行，然后我意识到需要使用“-webkit-text-size-adjust”将字体大小调整为与缩放级别相同，以便它不会破坏设计布局。

我的挑战是像这样动态设置 css：

#app * {
  -webkit-text-size-adjust : nn%  
}

其中 nn 是缩放 X 100 + '%'

我试过了：

1) 在app div上设置样式，但这对应用到内部元素没有帮助

 <div id="app" style="zoom: 0.XX; -webkit-text-size-adjust: XX%">

2）使用javascript设置所有内部节点，但我认为不仅效率较低，而且如果我的窗口没有调整大小，它也不会触发，这意味着如果我导航到其他页面，这个逻辑不会被调用。

REF: https://stackoverflow.com/questions/25305719/change-css-for-all-elements-from-js

let textSizeAdjust = function(zoom) {
  let i,
  tags = document.getElementById("app").getElementsByTagName("*"),
  total = tags.length;

  for ( i = 0; i < total; i++ ) {
    tags[i].style.webkitTextSizeAdjust = (zoom * 100) + '%';
   }
}

3) 我尝试使用 javascript，但很可能它们在技术上不正确，因为 querySelector 返回 null。

document.querySelector('#app *').style.webkitTextSizeAdjust = zoom *100 + '%';

document.querySelector('#app').querySelector('*').style.webkitTextSizeAdjust = zoom * 100 + "%";

最终，我相信我需要动态创建 css，以便浏览器将此设置应用于 DOM：

#app * {
   -webkit-text-size-adjust: nn    
}

请让我知道这是否正确，或者如何使用javascript创建上述css并动态更改值？

Answer 1

CSS 变量

---

要求

---

HTML

---

每个有数字数据的form control都应该有：

1. value={默认，不要留空}

2. class='num'

3. data-unit={度量单位或单个空格}

4. 选择/选项标签应该有 selected attribute

---

CSS

CSS Variable签名： propertyName:var(--propertyValue)

---

// Declare CSS Variables at the top of a stylesheet
:root {
  --mx0: 50px;
  --my0: 50px;
  --rz0: 1.0;
  --zm0: 1.0;
  --sp0: 360deg;
}

---

JavaScript

---

在 JavaScript 演示中注释了分步详细信息。这是代码中最重要的语句：

CSSStyleDeclaration      CSS Variable

     ?                      ?

`ele.style.setProperty(`--${node.id}`,

${node.valueAsNumber}${node.dataset.unit})

     ?                      ? 

HTMLInputElement      DataSet API

---

演示1

---

// Reference form#UI
var ui = document.forms.UI;

// Register form#UI to change event
ui.addEventListener('change', setCSS);

// Callback passes Event Object
function setCSS(e) {

  // Collect all form controls of form#UI into a NodeList
  var fx = ui.elements;

  // Reference select#pk0
  var pk0 = fx.pk0;

  // Get select#pk0 value
  var pick = pk0.options[pk0.selectedIndex].value

  // if the changed element has class .num...
  if (e.target.className === 'num') {

    // Reference Event Target
    var tgt = e.target;

    // Then reference is by its #id
    var node = document.getElementById(tgt.id);

    // DOM Object to reference either html, square, or circle
    var ele;

    /* Determine which tag to test on: html (affects everything),
    || #sQ<uare> and #ciR<cle> shapes.
    */
    switch (pick) {
      case "rT":
        ele = document.documentElement;
        break;
      case "sQ":
        ele = document.getElementById('sQ');
        break;
      case "cR":
        ele = document.getElementById('cR');
        break;
      default:
        break;
    }
    /* Sets a target element's Transform:
    || translateXY, scale, and rotate
    */
    ele.style.setProperty(`--${node.id}`, `${node.valueAsNumber}${node.dataset.unit}`);
  }
}

/* Declare CSS Variables on the :root selector at the top of sheet
   All CSSVar must be prefixed with 2 dashes: --
*/

:root {
  --mx0: 50px;
  --my0: 50px;
  --rz0: 1.0;
  --sp0: 360deg;
}

.set {
  border: 3px ridge grey;
  border-bottom-left-radius: 6px;
  border-bottom-right-radius: 6px;
  padding: 5px;
}


/* The var() function's signature is:
   propertyName: var(--propertyValue)
*/

#sQ {
  position: relative;
  background: rgba(0, 100, 200, 0.3);
  width: 50px;
  height: 50px;
  transform: translateX(var(--mx0)) translateY(var(--my0)) scale(var(--rz0)) rotate(var(--sp0));
  border: 3px ridge grey;
  z-index: 1;
  transition: all 1s ease;
}

#cR {
  position: relative;
  background: rgba(200, 100, 0, 0.3);
  width: 50px;
  height: 50px;
  transform: translateX(var(--mx0)) translateY(var(--my0)) scale(var(--rz0)) rotate(var(--sp0));
  border: 3px ridge grey;
  border-radius: 50%;
  transition: all 1s ease;
}

#sQ::before {
  content: '\1f504';
  text-align: center;
  font-size: 2.25rem;
  transform: translate(1px, -8px)
}

#cR::after {
  content: '\1f3b1';
  text-align: center;
  font-size: 2.25rem;
}

input,
select {
  display: inline-block;
  width: 6ch;
  font: inherit;
  text-align: right;
  line-height: 1.1;
  padding: 1px 2px;
}

select {
  width: 9ch
}

.extension {
  overflow-y: scroll;
  overflow-x: auto;
  min-height: 90vh;
}


/* For debugging on Stack Snippets */


/*.as-console-wrapper {
  width: 25%;
  margin-left: 75%;
  min-height: 85vh;
}*/

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <style></style>
</head>

<body>
  <!--
HTML Requirements
 Each form control that has numerical data should have:
 1. value={a default, don't leave it blank}
 2. class='num'
 3. data-unit={unit of measurement or a single space}
 4. The select/option tag should have the selected attribute
-->
  <form id='UI'>
    <section class='set'>

      <label>X: </label>
      <input id='mx0' class='num' type='number' min='-350' max='350' value='50' step='10' data-unit='px'>

      <label>Y: </label>
      <input id='my0' class='num' type='number' min='-350' max='350' value='50' step='10' data-unit='px'>

      <label>Size: </label>
      <input id='rz0' class='num' type='number' min='0' max='5' value='1' step='0.1' data-unit=' '>

      <label>Spin: </label>
      <input id='sp0' class='num' type='number' min='0' max='1440' value='360' step='180' data-unit='deg'>

      <label>Pick: </label>
      <select id='pk0' class='num'>
        <option value='rT' selected>Root</option>
        <option value='sQ'>Square</option>
        <option value='cR'>Circle</option>
      </select>

    </section>
  </form>
  <section class='set extension'>
    <div id='sQ' class='test shape' width="50" height="50"></div>
    <div id='cR' class='test shape' width="50" height="50"></div>
  </section>
</body>

</html>

---

更新

此更新专门针对 OP，因此可能对其他用户有帮助或无帮助。

德诺 2

---

:root {
  --opc: 0;
  --zoom: 1;
}

.fc {
  display: inline-block;
  width: 18ch;
  margin:0 0 10px 0
}

#app * {
  opacity: var(--opc);
  transform: scale(var(--zoom));
}

<!doctype html>
<html>

<head>
  <meta charset='utf-8'>

</head>

<body>


  <form id='app' action='https://httpbin.org/post' method='post' target='view'>
    <fieldset class='sec'>
      <legend>App of Mystery</legend>
      <input id='A0' name='A0' class='fc' type='text' placeholder='User Name'>
      <input id='A1' name='A1' class='fc' type='password' placeholder='Password'>
      <input type='submit'>
      <input type='reset'>
      <input id='zBtn' type='button' value='Zoom'>
      <iframe name='view' frameborder='1' width='100%'></iframe>
    </fieldset>

  </form>
  <script>
    var node = document.querySelector('#app *');
    var zBtn = document.getElementById('zBtn');
    var flag = false;
    
    document.addEventListener('DOMContentLoaded', function(e) {
      node.style.setProperty("--opc", "0.5");
    });

    document.addEventListener('click', function(e) {
      node.style.setProperty("--opc", "1");
    });
    
    zBtn.addEventListener('click', function(e) {
      if (flag) {
        flag = false;
        node.style.setProperty("--zoom", "1");
      } else {
        flag = true;
        node.style.setProperty("--zoom", "1.25");
      }
    });

   
  </script>
</body>

</html>

Answer 2

我对@9​​87654321@了解不多

但是，这应该适用于创建动态样式表并插入它：

我也添加了代码来动态更新它

const form = document.getElementById('colorChooser');
form.addEventListener('submit', (e) => {
  e.preventDefault();
  color = document.getElementById('colorInput').value;
  const style = document.getElementById('colorStyle');
  style.innerHTML = `#app * {
    background-color: ${color};
  }`;
});
const style = document.createElement('style');
style.id = 'colorStyle';
style.type = 'text/css';
style.innerHTML = `#app * {
  background-color: red;
}`;

document.head.appendChild(style);

#app {
  margin-bottom: 10px;
}
#inner {
  width: 50px;
  height: 50px;
  background-color: black;
}

<div id="app">
  <div id="inner"></div>
</div>
<form id="colorChooser">
<input id="colorInput" type="text" placeholder="red" />
<input type="submit" value="Update color"/>
</form>