如何用JavaScript为两个Div设置相同max-width？已尝试代码无效

一、先确认代码执行时机 #

如果你的JS代码写在页面<head>或<body>开头，DOM还没加载完成就执行了，自然获取不到.pn-print-page元素。解决方式二选一：

• 把JS代码挪到</body>标签前（页面最底部），确保DOM渲染完毕后再执行；
• 用DOMContentLoaded事件包裹代码：

document.addEventListener('DOMContentLoaded', function() {
  // 宽度设置代码放在这里
});

二、检查元素选择与赋值逻辑 #

用getElementsByClassName的问题

它返回的是HTMLCollection类数组，不能直接给整个集合设置样式，必须遍历每个元素：

// 错误写法（直接操作集合）
document.getElementsByClassName('pn-print-page').style.maxWidth = '800px';

// 正确写法（遍历元素）
const pages = document.getElementsByClassName('pn-print-page');
for (let i = 0; i < pages.length; i++) {
  pages[i].style.maxWidth = '800px';
}

用querySelector的问题

它只返回第一个匹配的元素，如果要操作多个.pn-print-page，得用querySelectorAll，同样需要遍历：

// 错误写法（只修改第一个元素）
document.querySelector('.pn-print-page').style.width = '800px';

// 正确写法（选中所有元素并遍历）
const pages = document.querySelectorAll('.pn-print-page');
pages.forEach(page => {
  page.style.maxWidth = '800px'; // 按需选maxWidth或width
});

注意：querySelector选类名必须加.，如果写成querySelector('pn-print-page')会匹配标签名，肯定找不到元素。

三、排查CSS优先级冲突 #

如果你的CSS里有类似代码：

.pn-print-page {
  max-width: 600px !important;
}

JS设置的行内样式会被!important覆盖，解决方式：

• 去掉CSS中的!important；
• 或者用JS强制设置优先级：

page.style.setProperty('max-width', '800px', 'important');

四、其他可行实现方法 #

1. CSS变量法：提前在CSS中定义变量，JS修改变量后所有关联元素自动生效

.pn-print-page {
  max-width: var(--page-max-width, 600px);
}

document.documentElement.style.setProperty('--page-max-width', '800px');

2. CSS类切换法：预定义样式类，用JS给元素添加类

.page-custom-width {
  max-width: 800px;
}

const pages = document.querySelectorAll('.pn-print-page');
pages.forEach(page => {
  page.classList.add('page-custom-width');
});

内容的提问来源于stack exchange，提问作者amyday7