Question

im尝试比较2个divs高度，以防万一div A更高，请向div B添加高度（我有几个div，其中一些高度没有进行任何调整
我试图使用js来实现它，但其他任何想法都很好

 `<div class="row">
    <div class="well">
        <div class="col-md-1 Acomp">
            <button class="btn">If this on is higher Make this one equal  </button >
        </div>
        <div class="col-md-10 Acomp">
            <p>most of the time this  one height if higher no need to adjust  </p>
        </div>
    </div>
</div>`


       var elements = document.querySelectorAll(".Acomp"),
            heights = [];
        console.log(heights);
        [].forEach.call(elements,
            function(each) {
                heights[heights.length] = getComputedStyle(each, null).getPropertyValue("height");
            });

        heights.sort(function(a, b) {
            return parseFloat(b) - parseFloat(a);
            newFunction(a, b);
        }));

        function newFunction(a, b) {
            if (a < b) {
                [].forEach.call(elements,
                    function(each) {
                        each.style.height = heights[0];
                    }); }; }

`

Answer 1

我认为您正在使问题变得更加复杂。

这是我针对两个div 的解决方案：

$ amixer scontrols

Simple mixer control 'Master',0
Simple mixer control 'PCM',0
Simple mixer control 'Line',0
Simple mixer control 'CD',0
Simple mixer control 'Mic',0
Simple mixer control 'Mic Boost (+20dB)',0
Simple mixer control 'Video',0
Simple mixer control 'Phone',0
Simple mixer control 'IEC958',0
Simple mixer control 'Aux',0
Simple mixer control 'Capture',0
Simple mixer control 'Mix',0
Simple mixer control 'Mix Mono',0

/* ------------THE FIRST SOLUTION: BEGIN------------ */
const elements = document.querySelectorAll(".Acomp")

if (elements[1].clientHeight < elements[0].clientHeight) {
  elements[1].style.height = elements[0].clientHeight + "px"
}
/* -------------THE FIRST SOLUTION: END------------- */



// here're two additional functions - not nicely written, but show that
// you don't just add a number to height, because that's a string
document.getElementsByClassName('addHeightB')[0].addEventListener('click', function(e) {
  elements[1].style.height = parseInt(elements[1].style.height, 10) + 30 + "px"
})

document.getElementsByClassName('subtractHeightB')[0].addEventListener('click', function(e) {
  elements[1].style.height = parseInt(elements[1].style.height, 10) - 30 + "px"
})

// here's the reset function for the first button
document.getElementsByClassName('setHeightToA')[0].addEventListener('click', function(e) {
  elements[1].style.height = elements[0].clientHeight + "px"
})

这是 n div s的解决方案：

（实际上是两个解决方案）

<div class="row">
  <div class="well">
    <div class="col-md-1 Acomp">
      <button class="btn setHeightToA">If this on is higher Make this one equal  </button>
    </div>
    <div class="col-md-10 Acomp" style="background-color: gray; color: white;">
      <p>most of the time this one height if higher no need to adjust </p>
    </div>
  </div>
</div>
<button class="btn addHeightB">Add 30px height to B</button>
<button class="btn subtractHeightB">Subtract 30px height from B</button>

const elements = document.querySelectorAll(".Acomp")

let heights = []

for (let element of Object.values(elements)) {
  heights.push(element.clientHeight)
}

/* ------------THE SECOND SOLUTION: BEGIN----------- */
// if the first element is the highest, then all elements should have the same height
if (elements[0].clientHeight === Math.max.apply(null, heights)) {
  for (let element of Object.values(elements)) {
    element.style.height = elements[0].clientHeight + "px"
  }
}
/* -------------THE SECOND SOLUTION: END------------ */

/* ------------THE THIRD SOLUTION: BEGIN------------ */
// make all elements as high as the highest
heights = heights.sort().reverse()

for (let element of Object.values(elements)) {
  element.style.height = heights[0] + "px"
}
/* -------------THE THIRD SOLUTION: END------------- */

/* ------------THE THIRD B SOLUTION: BEGIN------------ */
// make all elements as high as the highest
const maxHeight = Math.max.apply(null, heights)

for (let element of Object.values(elements)) {
  element.style.height = maxHeight + "px"
}
/* -------------THE THIRD B SOLUTION: END------------- */

比较div A至div B的高度＆仅当A较高时才将高度添加至div b

1 个答案: