Javascript - Thay đổi chiều rộng đường viền mà không cần di chuyển các phần tử xung quanh.

Question

Tôi có HTML sau:

<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> 

Và JS sau đó thay đổi kích thước biên giới trên di chuột:

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

Vấn đề là nó di chuyển các yếu tố xung quanh nó bằng cách thêm biên giới-width đến tổng chiều rộng của phần tử. Bất kỳ đề xuất nào về điều này?

Answer 1

Khi tôi làm điều này và tôi muốn cùng + Kết quả -movement biên giới, tôi muốn làm điều này:

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

biên tiêu cực mang đến cho tất cả mọi thứ trở lại trong

Bạn cũng có thể ngưng tụ phong cách thành một đối tượng và vượt qua chúng trong một .css() gọi:.

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

Answer 2

Có, thêm position: relative; left: -5px; để định vị chính xác.

Answer 3

Bạn có thể thêm vào phần đệm nếu bạn trừ khỏi đường viền và ngược lại.

Answer 4

giảm biên độ với cùng một lượng điểm ảnh bạn tăng chiều rộng biên giới với

Answer 5

Thay đổi chiều rộng và chiều cao của nguyên tố này bằng hai lần số lượng của sự thay đổi biên giới-width (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'); 
    }); 

Lưu ý: này sẽ chỉ hoạt động nếu biên độ rộng, chiều rộng, và chiều cao sử dụng cùng một đơn vị chiều dài. Nếu sử dụng một đơn vị không phải là 'px', hãy thay đổi điều đó cho phù hợp.

Answer 6

Giảm chiều rộng bằng hai lần so với tăng biên giới ..

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

có một cái nhìn tại http://jsfiddle.net/rBrZL/

Answer 7

Bạn có thể làm giảm lợi nhuận với số tiền tương tự mà bạn mở rộng biên giới.

Nếu bạn chỉ định lớp CSS cho kiểu di chuột, thì bạn chỉ có thể thêm và xóa lớp thay vì thêm kiểu nội tuyến vào phần tử. Bằng cách đó, tất cả CSS nằm trong bảng định kiểu thay vì nằm rải rác trong mã, điều này giúp dễ bảo trì hơn.

Tôi viết lại mã để sử dụng một style sheet thay vì tất cả những phong cách nội tuyến:

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

Lưu ý: id không được bắt đầu bằng một chữ số, ví dụ như 160x600.

Answer 8

Bạn có thể sử dụng "đường viền" thay vì đường viền là hỗ trợ trình duyệt phù hợp với bạn.