JavaScript中如何将.style.width获取的像素值除以2？

嗨，我来帮你搞定这个小问题～

你遇到的核心问题是：x[0].style.width返回的是带单位的字符串（比如"200px"），不是纯数字。JavaScript里直接对字符串做除法运算时，会尝试把字符串转换为数字，但带px后缀的字符串转数字会得到NaN（非有效数字），所以你的公式没法得到预期结果。

下面给你两种实用的解决思路，还附带一个容易踩的坑提醒：

方法1：提取字符串中的数字再计算 #

不管是整数还是小数像素，都可以用parseFloat()（或者parseInt()针对整数）提取数字部分，计算后再拼接回px单位：

var x = document.getElementsByClassName("item");
// 先获取带px的字符串宽度
var v = x[0].style.width;
// 提取纯数字
var numWidth = parseFloat(v);
// 除以2后拼接px，得到目标值
var halfWidth = numWidth / 2 + "px";
// 把计算后的宽度赋值回去（如果需要的话）
x[0].style.width = halfWidth;

如果确定宽度是整数像素，用parseInt(v, 10)也可以，第二个参数10是指定十进制，避免意外的八进制解析问题。

方法2：获取实际渲染的宽度（解决样式表中定义的宽度） #

这里要注意一个坑：element.style.width只能获取内联样式（也就是直接写在元素style属性里的宽度，比如<div class="item" style="width:200px"></div>）。如果你的宽度是写在CSS样式表（<style>标签或外部CSS文件）里的，style.width会返回空字符串，这时候得用getComputedStyle获取元素实际渲染的宽度：

var x = document.getElementsByClassName("item");
// 获取元素实际渲染的样式
var computedStyle = window.getComputedStyle(x[0]);
// 提取宽度的数字值
var numWidth = parseFloat(computedStyle.width);
// 计算后赋值
var halfWidth = numWidth / 2 + "px";
x[0].style.width = halfWidth;

这样就能完美解决你的问题啦～

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