Question

当我尝试在按钮的innerText中执行数字并使用Javascript用一些新的更大数字（88,888）覆盖原始值时。新号码没有在我的按钮中重新对齐。

我试图在Javascript中使用object.style.textAlign ='center'，但没有运气我的号码可以达到5位数，大约是88,888。

请帮忙。

/// <---For Quality Int--->///
///
// Get the modal
var modal = document.getElementById('myModal');
// Get the button that opens the modal
var QualityIntbtns = document.querySelectorAll('.QualityIntbtn button:not([id=reset]):not([id=trigger])');
// target value
var QiTV = document.getElementById('inputtargetqi');
// Each button click => open modal 
for(var i = 0; i < QualityIntbtns.length; i++){
  QualityIntbtns[i].onclick = function() { 
    QiTV.setAttribute('startbtn', this.id );
    modal.style.display = "block"; 
  }
}
// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];
// When the user clicks on <span> (x), close the modal
span.onclick = function() {
    modal.style.display = "none";
}
// When the user clicks anywhere outside of the modal, close it
window.onclick = function() {
    if (event.target == modal) {
        modal.style.display = "none";
    }
}
//Arithematic Operator Control
function qicheckValue(){
  var inputvalue = document.getElementById('modalvalue');
  var buttonsubmit = document.getElementById(QiTV.getAttribute('startbtn') );
  var value = parseInt(inputvalue.value);
  var targetValue = parseInt(QiTV.value);
  
  if (value < targetValue){
    buttonsubmit.style.background = 'rgb(255, 0, 0)';
    buttonsubmit.style.textAlign = "left";
    buttonsubmit.innerText = value ;
  }
  else if (value >= targetValue){
    buttonsubmit.style.background = 'rgb(60, 179, 113)';
    buttonsubmit.style.textAlign = "left";
    buttonsubmit.innerText = value ;
  }
  else{
    buttonsubmit.style.background = '';
    buttonsubmit.style.textAlign = "left";
    buttonsubmit.innerText = ''
  }
  modal.style.display = "none" ;
  return false;
}

.QualityIntbtn {
  border: 1px solid blue;
  background-color: rgb(255, 255, 0);
  height: 280px;
  Width: 225px;
  display: inline-block;
}

.AllButtons button {
  height: 24px;
  width: 30px;
  font-family: Arial;
  font-weight: bold;
  font-size: 9px;
  box-shadow: 0 0.25px #999;
}
/* The Modal (background) */

.modal_qi, .modal_qe, .modal_i, .modal_p, .modal_d {
  display: none;
  /* Hidden by default */
  position: fixed;
  /* Stay in place */
  z-index: 1;
  /* Sit on top */
  left: 0;
  top: 0;
  width: 100%;
  /* Full width */
  height: 100%;
  /* Full height */
  background-color: rgb(0, 0, 0);
  /* Fallback color */
  background-color: rgba(0, 0, 0, 0.4);
  /* Black w/ opacity */
}


/* Modal Content/Box */

.modal-content, .qe_modal-content, .i_modal-content, .p_modal-content, .d_modal-content {
  background-color: #fefefe;
  margin: 15% auto;
  /* 15% from the top and centered */
  padding: 20px;
  border: 1px solid #888;
  width: 240px;
  height: 200px;
}

/* The Close Button */

.close, .qe_close, .i_close, .p_close, .d_close {
  color: #aaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
}

.close:hover,
.close:focus,
.qe_close:hover,
.qe_close:focus
.i_close:hover,
.i_close:focus 
.p_close:hover,
.p_close:focus 
.d_close:hover,
.d_close:focus {
  color: black;
  text-decoration: none;
  cursor: pointer;
}

<section class="AllButtons">
  <div style="position:relative; top:5px" class=QualityIntbtn>
          <button id="qi1" style="position:absolute; left:70px; top:40px">1</button>
          <button id="qi2" style="position:absolute; left:100px; top:40px">2</button>
          <button id="qi3" style="position:absolute; left:130px; top:40px">3</button>
          <button id="qi4" style="position:absolute; left:40px; top:64px">4</button>
          <button id="qi5" style="position:absolute; left:70px; top:64px">5</button>
          <button id="qi6" style="position:absolute; left:130px; top:64px">6</button>
          <button id="qi7" style="position:absolute; left:160px; top:64px">7</button>
          <input id="inputtargetqi" class=numberonly value=0 type="number" min="0" ondrop="return false;" onpaste="return false;" onkeypress='return event.charCode>=48 && event.charCode<=57' ; style="position:absolute; left:55px; top:115px">

          <input id="reset" type=button value=Reset style="position:absolute; left:5px; top:5px; font-size:0.75rem">

          <input id="trigger" type=button value="Change Target Value" onclick="qichangeTarget()" style="position:absolute; left:70px; top: 140px">
        </div>
          </section>
          
<!-- The Modal Box Quality Internal -->
<div id="myModal" class="modal_qi">

  <!-- Modal content -->
  <div class="modal-content">
    <span class="close">&times;</span>
    <p>PLEASE INPUT QUANTITY</p>
    <input id="modalvalue" type="number" ondrop="return false;" onpaste="return false;" onkeypress='return event.charCode>=48 && event.charCode<=57' ; style=font-size:20px>
    <br>
    <br>
    <button id="submit" class=submit_on_enter onclick="return qicheckValue()">SUBMIT</button>
  </div>
</div>

Answer 1

CSS Flexbox救援！用以下内容替换您的按钮HTML ...

<div class="outer-flex-wrapper">
  <div class="top-flex-wrapper">
    <button id="qi1" class='button-text'>1</button>
    <button id="qi2" class='button-text'>2</button>
    <button id="qi3" class='button-text'>3</button>
  </div>
  <div class="bottom-flex-wrapper">
    <div class="bottom-inner-flex-wrapper1">
      <button id="qi4" class='button-text'>4</button>
      <button id="qi5" class='button-text'>5</button>
    </div>
    <div class="bottom-inner-flex-wrapper2">
      <button id="qi6" class='button-text'>6</button>
      <button id="qi7" class='button-text'>7</button>
    </div>
  </div>
</div>

然后将以下类添加到CSS ..

.outer-flex-wrapper {
  display: flex;
  flex-direction: column;
  width: 60%;
  margin: 0 auto;
  position: relative;
  top: 32px;
}

.top-flex-wrapper {
  display: flex;
  justify-content: center;
}

.bottom-flex-wrapper {
  display: flex;
  justify-content: space-between;
}

.bottom-inner-flex-wrapper1 {
  display: flex;
  justify-content: flex-start;
}

.bottom-inner-flex-wrapper2 {
  display: flex;
  justify-content: flex-end;
}

.button-text {
  display: flex;
  justify-content: center;
}

您可以在此处详细了解Flexbox ... https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Answer 2

或者，更简单的方法是对原始代码进行最少的更改，只需将flex属性添加到每个内联样式中......

<button id="qi1" style="position:absolute; left:70px; top:40px; display: flex; justify-content: center;">1</button>
<button id="qi2" style="position:absolute; left:100px; top:40px; display: flex; justify-content: center;">2</button>
<button id="qi3" style="position:absolute; left:130px; top:40px; display: flex; justify-content: center;">3</button>
<button id="qi4" style="position:absolute; left:40px; top:64px; display: flex; justify-content: center;">4</button>
<button id="qi5" style="position:absolute; left:70px; top:64px; display: flex; justify-content: center;">5</button>
<button id="qi6" style="position:absolute; left:130px; top:64px; display: flex; justify-content: center;">6</button>
<button id="qi7" style="position:absolute; left:160px; top:64px; display: flex; justify-content: center;">7</button>

...但所有内联造型让我哭泣！：）

重新调整按钮InnerText以获得更大的数字。

2 个答案: