JavaScript用screen.width设置元素宽度不生效问题求解

给元素的style.width属性赋值时，必须传入带合法CSS单位的字符串值，纯数字会被浏览器判定为无效样式，直接忽略。
你写"10px"时传入的是带px单位的合法字符串，所以能正常生效；而screen.width / 2的计算结果是无单位的纯数值，浏览器无法解析，自然不会修改div宽度。

给计算出的数值拼接上对应的长度单位即可，推荐使用window.innerWidth获取视口实际可用宽度，比screen.width适配性更好：

var elements = document.getElementsByClassName('myDiv');
for (var i = 0; i < elements.length; i++) {
  // 拼接px单位，同时替换为更准确的视口宽度API
  elements[i].style.width = (window.innerWidth / 2) + 'px';
}

• getElementsByClassName返回的是动态DOM集合，你初始循环只会给页面已存在的.myDiv设置宽度，后续无限滚动新加载的元素不会自动继承这个宽度，需要在每次新元素插入DOM后，单独给新增元素补设宽度。
• 这类宽度适配需求优先用CSS实现，不需要写JS逐元素修改，性能更好也能自动覆盖新加载的元素：

.myDiv {
  width: 50vw;
}

上述CSS中50vw代表视口宽度的50%，和你要实现的宽度逻辑完全一致，所有带myDiv类名的元素不管是初始加载还是后续滚动加载，都会自动适配宽度。

• 不推荐用screen.width做适配：这个值返回的是设备屏幕的物理宽度，在用户缩小浏览器窗口、移动端存在浏览器工具栏/安全区域时，计算出的结果会和实际内容可用宽度有偏差。

内容的提问来源于stack exchange，提问作者Mrs.Gelb