使用javascript

时间：2018-05-18 17:31:23

标签： javascript css

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

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

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

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

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

其中nn是缩放X 100 +＆＃39;％＆＃39;

我试过了：

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并动态更改值？

2 个答案:

答案 0 :(得分：4)

CSS变量

要求

HTML

每个包含数字数据的 form control 应该包含：

  1. class='num' {默认情况下，请勿将其留空}

  2. <强> data-unit=

  3. propertyName: {度量单位或单个空格}

  4. select / option标记应包含 selected attribute

    5. CSS

    CSS Variable签名： var(--propertyValue) // Declare CSS Variables at the top of a stylesheet :root { --mx0: 50px; --my0: 50px; --rz0: 1.0; --zm0: 1.0; --sp0: 360deg; } 

                               

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

    的JavaScript

    JavaScript演示中有详细说明。这是代码中最重要的陈述：

    <强> CSSStyleDeclaration 的 CSS Variable 

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

    ）

    // 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}`);
  }
}

    <强> HTMLInputElement 的 DataSet API

    演示1 

    /* 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>
    :root {
  --opc: 0;
  --zoom: 1;
}

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

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

    更新

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

    Deno 2 

    <!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>
    auto currentIndex = 0;
auto buttonPress = [this, &currentIndex] {
    if (currentIndex == mMaterials.size()) 
        currentIndex = 0;
    mAcoustics->setMaterial(mMaterials[currentIndex]);
    currentIndex++;
};

InputManager::bindKeyFunction(0x31 /* '1' key */, buttonPress, ETriggerEvent::OnRelease);

答案 1 :(得分：1)

我对-webkit-text-size-adjust

了解不多

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

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

＆＃13;
＆＃13; 
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);
＆＃13; 
#app {
  margin-bottom: 10px;
}
#inner {
  width: 50px;
  height: 50px;
  background-color: black;
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题