Question

我正在尝试使用javascript将div的宽度设置为另一个div的宽度。就我而言，第二个div是从第一个克隆的。

我遇到的问题与填充有关，以及style.width的定义与clientWidth / offsetWidth / scrollWidth的不同。在下面的示例中，我有两个two.style.width = one.clientWidth + 'px';定义相同，但宽度不同。当按下按钮时，我试图将较小的宽度设置为较大的宽度 - 但结果是它获得较大的宽度加上填充（额外的20px）。

有没有办法改变这条线：

div

使两个function setWidth() { var one = document.getElementById("one"); var two = document.getElementById("two"); two.style.width = one.clientWidth + 'px'; }的宽度相等？

.outer {
  background: red;
  padding: 10px;
  } 
.inner {
  background: green;
  height: 10px;
  } 

#one {
  width: 100px; 
}
#two {
  width:50px;
    }

<div id=one class=outer><div class=inner></div></div>
<br>
<div id=two class=outer><div class=inner></div></div>
<button onclick="setWidth()">SET WIDTH</button>

import org.apache.spark.ml.feature.StringIndexer
import org.apache.spark.ml.feature.VectorAssembler
import org.apache.spark.ml.classification.LogisticRegression

val df = sqlContext.createDataFrame(Seq(
Tuple2(0.0,"a"), Tuple2(1.0, "b"), Tuple2(1.0, "c"), Tuple2(0.0, "c")
)).toDF("y", "x")

// index the string column "x"
val indexer = new StringIndexer().setInputCol("x").setOutputCol("xIdx").fit(df)
val indexed = indexer.transform(df)

// build a data frame of label, vectors
val assembler = (new VectorAssembler()).setInputCols(List("xIdx").toArray).setOutputCol("features")
val assembled = assembler.transform(indexed)

// build a logistic regression model and fit it
val logreg = (new LogisticRegression()).setFeaturesCol("features").setLabelCol("y")
val model = logreg.fit(assembled)

Answer 1

您可以使用getComputedStyle：

function setWidth() {
  var one = document.getElementById("one");
  var two = document.getElementById("two");
  style = window.getComputedStyle(one);
  wdt = style.getPropertyValue('width');
  two.style.width = wdt;
}

这是fiddle

Answer 2

你应该使用.offsetWidth。它们属于元素，而非.style。

function setWidth() {
    var w=document.getElementById('one').offsetWidth
    document.getElementById('two').setAttribute("style","width:"+w+"px");
}

Answer 3

宽度不考虑填充。你还需要减去它。这样的事情应该有效：

function setWidth() {
  var one = document.getElementById("one");
  var two = document.getElementById("two");

  two.style.width = one.offsetWidth  + 'px';

  //update the width again, subtracting the difference between the first div and the second (which includes padding)
  two.style.width = (two.offsetWidth-((two.offsetWidth - one.offsetWidth)*2))  + 'px';
}

您可以在此处看到它：https://jsfiddle.net/igor_9000/55d1pfak/1/

为了它的价值，jQuery处理这个更容易一些，并获得元素宽度，包括填充/边框。这可能是你的另一种选择。

希望有所帮助！

Answer 4

您需要考虑one的填充。

function setWidth() {
  var one = document.getElementById("one");
  var two = document.getElementById("two");
  var leftPadding = window.getComputedStyle(one, null).getPropertyValue('padding-left');
  var width = window.getComputedStyle(one, null).getPropertyValue('width');

  two.style.width = width;
  two.style.padding = leftPadding;
}

这是JSFiddle。

Answer 5

我的代码将使用'js-equal-width'类为所有元素找到最大宽度，并将所有元素设置为相同宽度。

$(function() {
    const extraWidth = 50
    var maxWidth = 0
    $('.js-equal-width').each(function() {
        maxWidth = maxWidth > $(this).width() ? maxWidth : $(this).width()
    })

    $('.js-equal-width').each(function() {
        $(this).width(maxWidth + extraWidth)
    })
})

您可以使用'js-equal-width'

<div style="width: 300px;">
     <span class="js-equal-width">Midterm Examination</span>
     <span class="js-equal-width">Final Examination</span>
</div>

如何将div的宽度设置为另一个div的宽度？

5 个答案: