CSS边框导致元素宽度异常问题求助

嘿，这个问题我之前做侧边栏的时候也踩过坑，咱们先搞清楚为啥加了border后$("#myDiv").css("width")会返回2px，再给你几个实用的解决方法：

首先，大概率是你的元素继承了box-sizing: border-box的样式（很多项目会全局设置这个来简化盒模型计算）。在这个盒模型下，你设置的width属性会包含border和padding的宽度——你给左右各加了1px的border，浏览器就自动把内容宽度压到0，但元素的总宽度变成了2px，这时候jQuery的css("width")返回的就是这个总宽度，而不是你设置的0px。

接下来看你要的是哪种宽度，对应不同的方法：

1. 想获取纯内容区域的宽度（不含border、padding） #

直接用jQuery的width()方法就行，它不管盒模型是什么，默认返回的就是内容区域的宽度：

// 这个会返回你预期的0px，完美符合需求
alert($("#myDiv").width());

对比一下：css("width")返回的是元素style里设置的width值（或者计算后的总宽度，看盒模型），而width()是专门取内容宽度的，这俩区别可大了！

2. 想获取内部内容的真实宽度（比如侧边栏展开需要的宽度） #

如果你的需求是知道div里的文字/子元素实际占了多宽（比如要做展开动画，把width设成这个值），用原生的scrollWidth属性最方便，不用克隆元素，直接就能拿到内容的总宽度（包括超出隐藏区域的部分）：

const myDiv = document.getElementById('myDiv');
// 这个会返回内部内容的实际宽度，比如里面的文字有100px宽，就返回100
alert(myDiv.scrollWidth);

要是你偏爱jQuery写法，也可以这么写：

alert($("#myDiv")[0].scrollWidth);

3. 顺便解决那个2px的边框显示问题 #

如果你只是不想在div隐藏时看到那2px的边框条，可以把隐藏状态的border设为透明，展开时再显示正常边框：

.myDivStyle{
  width: 0px;
  position: absolute;
  z-index: 1;
  top: 0;
  overflow-x: hidden;
  border: 1px solid transparent; /* 隐藏时边框透明 */
  transition: width 0.3s ease; /* 加个过渡动画更丝滑 */
}
/* 给展开状态加个类 */
.myDivStyle.open{
  width: auto; /* 或者你计算好的宽度 */
  border: 1px solid #cccccc; /* 展开时显示正常边框 */
}

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