Javascript - 在不移動周圍元素的情況下更改邊框寬度。

我有以下HTML：Javascript - 在不移動周圍元素的情況下更改邊框寬度。

<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'); 
    });

的問題是，它是由添加邊框寬度與移動它周圍的元素元素的總寬度。有關於此的任何建議？

來源

2010-11-10 David Ryder

當我這樣做，我想同樣的+邊境-movement結果，我想這樣做：

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

負利潤率帶來的一切早在

您也可以凝聚的樣式合併到一個對象，並通過他們在一個名爲.css（）調用：

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

來源

2010-11-10 23:11:08

7px只是一個例子，順便說一句 - 這是很多的邊界。 – 2010-11-10 23:11:56

謝謝！這實際上是我嘗試過，但我得到了基本的數學錯誤哈哈。 – 2010-11-11 03:25:09

太簡單了，好甜。 – magma 2013-11-06 01:30:53

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

來源

2010-11-10 23:08:37 dionyziz

如果您從邊框中減去，則可以添加到填充中，反之亦然。

來源

2010-11-10 23:08:56

下降幅度與等量像素的你增加邊框寬度與

來源

2010-11-10 23:09:23 Thorbear

變化的寬度和元件的高度由邊界寬度變化量的兩倍（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」以外的單位，請相應更改。

來源

2010-11-10 23:14:34 PleaseStand

+1。性感演示。 '當然，你可以通過即時計算差異來做得更好：P – 2010-11-10 23:21:55

由邊界增加兩倍寬度減小..

$('.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/

來源

2010-11-10 23:23:38

可以降低毛利與您擴大邊境相同的金額。

如果您爲懸停樣式指定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。

來源

2010-11-10 23:30:08 Guffa

您可以使用「大綱」而不是邊框是瀏覽器支持與您同在。

來源

2010-11-11 07:53:59 Rimantas

Javascript - 在不移動周圍元素的情況下更改邊框寬度。

回答

相關問題