使用Javascript将两个类设置为相同的宽度/最大宽度

Question

我正在尝试使用javascript动态地将两个div设置为相同的最大宽度..到目前为止我已经做到了：

window.onload = function setWidth() {
  var one = document.getElementsByClassName("adsm-skin site-main");
  var two = document.getElementsByClassName("pn-print-page");
    style = window.getComputedStyle(one);
    wdt = style.getPropertyValue("max-width");
    two.style.maxWidth = wdt;
}

但是它不起作用（当我希望它与 .adsm-skin .site-main 匹配时，.pn-print-page 在页面加载时根本没有注册任何最大宽度）

我也尝试过这个：

window.onload = function () {
function setWidth() {
  var one = document.querySelector(".other-div");
  var two = document.querySelector(".pn-print-page");
  style = window.getComputedStyle(one);
  wdt = style.getPropertyValue('width');
  two.style.width = wdt;
}
};

pn-print-page 也没有添加宽度。代码有问题吗？如果没有，你知道使用 javascript 执行此操作的任何其他方法吗？预先感谢

Answer 1

我能想到的唯一问题是你的

other-div

在CSS中没有规则

max-width

：

.other-div {
    max-width: 300px;
}

getPropertyValue()

方法返回一个包含指定

CSS

属性值的字符串。如果未指定该属性，则返回空字符串。

function setWidth() {
    var one = document.querySelector(".other-div")
    var two = document.querySelector(".pn-print-page")
    style = window.getComputedStyle(one)
    wdt = style.getPropertyValue("max-width")
    two.style.width = wdt
}

window.onload = function () {
    setWidth()
}

div {
  border: 1px solid black;
}

.other-div {
  max-width: 300px;
}

<div class="other-div">other-div</div>
<div class="pn-print-page">pn-print-page</div>