动态对齐文本。基于选择输入值

debugcn 发表于 Dev

西雷尼

所以我尝试做的是根据选择输入更改文本的对齐方式。

这是我想用它更改的文本

/** Change font-alignment */
function changeFontAlignment(fontAlignment) {
  var columns = document.querySelectorAll('.column');

  if (fontAlignment) {
    for (var i = 0; i < columns.length; i++) {
      console.log(columns[i]);
      columns[i].className += " " + fontAlignment.value;

      // Toggle class Alignments
      if (columns[i].classList.length >= 3) {
        columns[i].classList.remove(columns[i].classList.item(1));
      }
    }
  } else {
    for (var i = 0; i < columns.length; i++) {
      columns[i].className += " " + document.querySelector('.exitIntentAlignment').value;
    }
  }
}

.left {
  text-align: left;
}

.middle {
  text-align: center;
}

.right {
  text-align: right;
}

<li>
  Font-alignment:
  <br>
  <select class="exitIntentFontFamily exitIntentAlignment" name="fontAlignment" onchange="changeFontAlignment(this)">
    <option value="left">left</option>
    <option value="middle">middle</option>
    <option value="right">right</option>
  </select>
</li>
<div class="exit-intent-inner" style="font-size: 24px; font-family: abel; padding-left: 20px; padding-right: 20px;">
  <h1 class="column exit-intent-header left">Test</h1>
  <p class="column description left">Register now to be the first to get all the updates</p>
  <div class="exit-intent-body">
    <div class="column left left">
      <form action="" class="form" style="margin-top: 70px;">
        <div class="inner-form">
          <div class="row">
            <div class="column left left">
              <input placeholder="email" class="email-input" type="text">
            </div>
          </div>
        </div>
        <div class="row">
          <div class="column left left">
            <button class="button" style="width: 300px; height: 40px; border-radius: 0px; color: rgb(255, 255, 255); background-color: rgb(0, 202, 186);">Inschrijven</button>
          </div>
        </div>
      </form>
    </div>
  </div>
</div>

但这有时效果很好，有时会增加两倍 left class

有人可以帮我解决这个问题吗？

约纳尔

为什么不翻转您的逻辑并在外部元素而不是内部元素上设置对齐类？CSS：

.left .column {
   text-align: left;
}
/* and similar for right and middle */

JS：

function changeFontAlignment(fontAlignment) {
  var container = document.getElementsByClassName('exit-intent-inner')[0]; //or id if you want
  container.classList.remove("left", "middle", "right");
  container.classList.add(fontAlignment);
}

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。