Javascript - 在不移动周围元素的情况下更改边框宽度。答案

【问题标题】：Javascript - Changing border-width without moving surrounding elements.Javascript - 在不移动周围元素的情况下更改边框宽度。
【发布时间】：2013-11-07 04:36:43
【问题描述】：

我有以下 HTML：

<div style="float:left;">
  <h2>Hover:</h2><br />
  <div class="Size" id="160x600" style="margin:10px;float:left;height:600px; width:160px;border:1px solid #90A4AF;text-align:center;position:relative">
    <div style="position:absolute;top:50%;text-align:center"> Text</div>
  </div>

  <div class="Size" id="336x280" style="margin:10px;float:left;height:280px; width:336px;border:1px solid #90A4AF;text-align:center;position:relative">
    <div style="position:absolute;top:50%;text-align:center">Text</div>
  </div>

  <div class="clear">&nbsp;</div>

  <div class="Size" id="728x90" style="margin:10px;height:90px; width:728px;border:1px solid #90A4AF;text-align:center;position:relative">
    <div style="position:absolute;top:50%;text-align:center">Text</div>
  </div>

</div>

还有以下 JS 在悬停时改变边框大小：

  $('.Size').hover(
  function() {
    $(this).css('borderWidth', '5px');
  },
  function() {
    $(this).css('borderWidth', '1px');
  });

问题在于它通过将边框宽度添加到元素的总宽度来移动元素。有什么建议吗？

【问题讨论】：

标签： jquery html css

【解决方案1】：

当我这样做并且我想要相同的 +border 移动结果时，我喜欢这样做：

function() { 
    $(this).css('borderWidth', '7px');
    $(this).css('margin', '-7px');
});

负边距将所有内容都带回来。

您还可以将样式压缩到一个对象中并在一个 .css() 调用中传递它们：

$(this).css( {borderWidth: '7px', margin: '-7px'} );

【讨论】：

7px 只是一个例子，顺便说一下 - 这是很多边框。
谢谢！这实际上是我尝试过的，但我的基本数学错了哈哈。

【解决方案2】：

将元素的宽度和高度更改为边框宽度更改量的两倍（live demo）：

$('.Size').hover(
  function() {
    $(this).css('borderWidth', '5px');
    $(this).css('width', parseFloat($(this).css('width')) - 8 + 'px');
    $(this).css('height', parseFloat($(this).css('height')) - 8 + 'px');
  },
  function() {
    $(this).css('borderWidth', '1px');
    $(this).css('width', parseFloat($(this).css('width')) + 8 + 'px');
    $(this).css('height', parseFloat($(this).css('height')) + 8 + 'px');
  });

注意：这仅适用于边框宽度、宽度和高度使用相同长度单位的情况。如果使用 'px' 以外的单位，请相应更改。

【讨论】：

+1。性感的演示。 '当然，您可以通过即时计算差异来做得更好：P

【解决方案3】：

您可以使用“轮廓”而不是边框，浏览器支持对您来说没问题。

【讨论】：

【解决方案4】：

如果你从边框中减去，你可以添加到填充，反之亦然。

【讨论】：

【解决方案5】：

是的，添加一个position: relative; left: -5px; 以正确定位它。

【讨论】：

【解决方案6】：

以与增加边框宽度相同的像素数量减少边距

【讨论】：

【解决方案7】：

将宽度减小两倍边框增加..

 $('.Size').hover(
  function() {
      var width = parseInt($(this).css('width'));
      $(this).css('borderWidth', '5px').css({width:width-8});
  },
  function() {
      var width = parseInt($(this).css('width'));
    $(this).css('borderWidth', '1px').css({width:width+8});
  })

看看http://jsfiddle.net/rBrZL/

【讨论】：

不好——每个 div 的底部在悬停时会发生变化。将边框更改为轮廓并删除所有宽度操作。

【解决方案8】：

您可以减少与加宽边框相同的边距。

如果您为悬停样式指定一个 CSS 类，那么您可以只添加和删除该类，而不是向元素添加内联样式。这样所有的 CSS 都在样式表中，而不是分散在代码中，这样更容易维护。

我重写了代码以使用样式表而不是所有那些内联样式：

CSS：

.Size { margin: 10px; border: 1px solid #90A4AF; text-align: center; position: relative; }
.Size.Small { float: left; height: 600px; width:160px; }
.Size.Medium { float: left; height: 280px; width: 336px; }
.Size.Large { height: 90px; width: 728px; }
.Size > div { position: absolute; top: 50%; text-align: center; }
.Size.Hover { margin: 6px; border-width: 5px; }

HTML：

<div style="float:left;">
  <h2>Hover:</h2>
  <br />
  <div class="Size Small" id="160x600">
    <div> Text</div>
  </div>

  <div class="Size Medium" id="336x280">
    <div>Text</div>
  </div>

  <div class="clear">&nbsp;</div>

  <div class="Size Large" id="728x90">
    <div>Text</div>
  </div>

</div>

Javascript：

$('.Size').hover(
  function() {
    $(this).addClass('Hover');
  },
  function() {
    $(this).removeClass('Hover');
  }
);

注意：id 不应以数字开头，例如 160x600。

【讨论】：