使用javascript动态更新css内容 [英] dynamically update css content using javascript

问题描述

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

There is a need to update css to dynamic value and I am not sure what's the best approach to it.

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

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

The zoom level will trigger based on window resize and the app will zoom according. I loaded this app into cordova and have it run within iPAD, then I realize the font-size needs to be adjusted to the same as zoom level using "-webkit-text-size-adjust" in order for it to not break the design layout.

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

My challenge is to set the css dynamically like this:

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

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

Where nn is the zoom X 100 + '%'

我试过：

1）在app div上设置样式，但这不适用于内部元素

1) Set the style on the app div, but this doesn't help to apply to inner elements

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

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

2) Use javascript to set to all inner nodes, but not only I think this is less efficient, but it won't get trigger if my window doesn't resize, that means if I navigate to other pages, this logic won't get called.

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。

3) I tried using javascript, and most likely they are technically incorrect because querySelector return null.

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

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

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

Ultimate, I believe I need to dynamically create the css, for the browser to apply this setting to the DOM:

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

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

Please let me know if this is the right, or how to use javascript to create the above css and change the value dynamically?

推荐答案

我对 -webkit-text-size-知之甚少调整

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

However, this should work for creating a dynamic stylesheet and inserting it:

我已添加代码以动态更新它

I have added code to dynamically update it as well

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>

这篇关于使用javascript动态更新css内容的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！