使用javascript动态更新css内容

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

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

其中nn是缩放X 100+“%”

我试过：

1） 在app div上设置样式，但这无助于应用于内部元素

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

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

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

---

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

我对

-webkit text size adjust

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

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

const form=document.getElementById（'colorChooser'）；
表格.addEventListener（'submit'，（e）=>{
e、 预防默认值（）；
颜色=document.getElementById（'colorInput'）。值；
const style=document.getElementById（'colorStyle'）；
style.innerHTML=`app*{
背景色：${color}；
}`;
});
const style=document.createElement（'style'）；
style.id='colorStyle'；
style.type='text/css'；
style.innerHTML=`app*{
背景色：红色；
}`;
document.head.appendChild（样式）
#应用程序{
边缘底部：10px；
}
#内在的{
宽度：50px；
高度：50px；
背景色：黑色；
}

CSS变量

要求

HTML

每个具有数字数据的应具有：

value={默认值，不要留空}

class='num'

数据单位={测量单位或单个空间}

选择/选项标签应具有


CSS
签名：
属性名称：
var（--propertyValue）



JavaScript

JavaScript演示中有详细的注释。以下是代码中最重要的语句：


谢谢，但我的用例是能够动态编辑样式。在您的示例中，需要根据条件将红色更改为蓝色、黑色或黄色。也许我应该删除样式表，更新值并使用此策略再次添加它？@Alocus是的，它只是一个DOM元素，因此您可以随时更改innerHTML。我已经相应地更新了答案我创建了一个样式并附加到head，然后我只是动态地更新样式的innerHTML，它就可以工作了。谢谢@AnilRedshiftwow。这真的很酷，非常感谢您花时间来帮助解释这一点。我甚至不知道我可以有css变量。尽管如此，我的目标是为“#app*”设置css，但我仍然不认为我可以通过javascript实现这一点，因为我不知道使用什么css选择器。你应该再次阅读你的问题：“最终，我认为我需要动态创建css，以便浏览器将此设置应用于DOM:
#app{-webkit text size adjust:nn}”
如果您阅读了我的答案，那么您将看到一个规则集
#app{-webkit text size adjust:var（--nn）}
和
：root{--nn:100%}
。我相信发生的事情是：@Alocus顺便说一句，为动态CSS注入样式块是一个很好的简单解决方案。我曾在工作中使用它来快速实现单页补丁。但是AnilRedshift的示例是在一个提交事件上触发的，该事件要求：1。一个
标签，2<代码>
或
3。很可能是服务器将数据发送到
@Alocus。如果您遇到问题，请询问另一个问题，并在此处通过评论通知我。我刚刚顿悟
matchMedia
和
CSSRules
才是您真正需要的。在这个令人困惑的问题上提供的解决方案无助于你问题的第2点。这是你提出的最具挑战性和必要的观点。刚刚意识到你正在使用
#app*
作为选择器。我建议你永远不要这样做…但不要看到整个布局谁说呢
var node=document.querySelectorAll（“#app*”）
收集
#app
下的每个标记。为了有效，您必须遍历每个标记。您需要研究该CSS属性并确定它是否可继承，如果是，则不要使用
*
。可继承的CSS属性应移到
#app
的子体。要进行验证，请F12并查看
#app
子元素的computed选项卡，查看它是否继承了该属性。
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) + '%';
   }
}

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

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

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

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