Question

我有以下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宽的身体，上面的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>

Answer 1

您可以使用大纲样式。在这里阅读大纲和边框之间的不同来自：https://www.tutorialrepublic.com/css-tutorial/css-outline.php

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

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

除了重叠之外，概述不会对周围的元素产生任何影响。

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

轮廓可以是非矩形的。

Answer 2

您可以使用：

Box-sizing: border-box;

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

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

样式边框和宽度问题

2 个答案: