样式边框和宽度问题[重复]答案

【问题标题】：style border and width issue [duplicate]样式边框和宽度问题[重复]
【发布时间】：2018-04-05 14:56:58
【问题描述】：

我有以下 div 样式

.myDivStyle{
    width: 0px;
    position: absolute;
    z-index: 1;
    top: 0;
    overflow-x: hidden;
}

适用于我的div

<div id="myDiv" class="myDivStyle">...</div>

看起来很完美，下面的脚本返回0px，再次完美。

alert($("#myDiv").css("width"));

但如果我为该样式添加边框，例如：

border: 1px solid #cccccc;

然后屏幕上有一个2px宽的小bod，上面的js代码返回一个2px的宽度。

如何让带边框的 div 在屏幕上不可见并返回 0px 宽度？ div 的显示/隐藏由 javascript 控制。我知道我可以使用display:none; 并使用javascript 再次打开它，但我想看看是否可以通过调整样式来完成？

alert($("#myDiv").css("width"));

.myDivStyle {
  width: 0px;
  position: absolute;
  z-index: 1;
  top: 0;
  overflow-x: hidden;
  border: 1px solid #ccc;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="myDiv" class="myDivStyle">...</div>

【问题讨论】：

试试这个：把你的边框改成outline: 1px solid #cccccc
api.jquery.com/innerwidth
尝试在你的 css 上设置：边框：1px 纯透明，然后在 js 中进行其他更改 - 将其更改为其他内容。

标签： javascript jquery html css

【解决方案1】：

您可以使用大纲样式。阅读此处了解轮廓和边框之间的不同来自：https://www.tutorialrepublic.com/css-tutorial/css-outline.php

轮廓不占用空间，因为它们总是放置在元素框的顶部，这可能会导致它们与其他元素重叠在页面上。

与边框不同，轮廓不允许我们将每条边设置为不同的宽度，或者为每条边设置不同的颜色和样式。一个轮廓在所有方面都是相同的。

除了重叠之外，轮廓对周围元素没有任何影响。

与边框不同，轮廓不会改变元素的大小或位置。

轮廓可能是非矩形的。

【讨论】：

【解决方案2】：

你可以使用：

Box-sizing: border-box;

这样你的css宽度的宽度也可以控制你的边框。

对于 Javascript 尝试使用： $(id).innerWidth(); 或 $(id).outerWidth(); 看看什么符合您的期望。

【讨论】：

这仍然会在屏幕上留下 2px 宽的线条。