Javascript - Cambiar el ancho del borde sin mover elementos circundantes.

tengo el código HTML siguiente:Javascript - Cambiar el ancho del borde sin mover elementos circundantes.

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

Y la siguiente JS que cambia de tamaño del borde en vuelo estacionario:

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

El problema es que está elementos a su alrededor en movimiento mediante la adición de la anchura del borde de la ancho total del elemento. Alguna sugerencia sobre esto?

Fuente

2010-11-10 David Ryder

Cuando hago esto y yo quiero ese mismo resultado + -Movimiento frontera, me gusta hacer esto:

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

El margen negativo trae todo de vuelta en

también puede condensar los estilos en un objeto y pasarlos en una css() llamada:.

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

Fuente

2010-11-10 23:11:08

Por cierto, el 7px es solo un ejemplo, eso es mucho borde. –

¡Gracias! Eso es en realidad lo que intenté, pero obtuve las matemáticas básicas mal jajaja. –

Tan simple, tan dulce. – magma

Sí, agregue un position: relative; left: -5px; para colocarlo correctamente.

Fuente

2010-11-10 23:08:37 dionyziz

Puede agregar al relleno si resta del borde y viceversa.

Fuente

2010-11-10 23:08:56

disminuir el margen con la misma cantidad de píxeles que aumenta el ancho del borde con

Fuente

2010-11-10 23:09:23 Thorbear

cambiar el ancho y la altura del elemento por el doble de la cantidad del cambio border-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'); 
    });

Nota: esto sólo funcionará si la frontera de anchura, la anchura, y altura usa la misma unidad de longitud. Si usa una unidad que no sea 'px', cámbiela en consecuencia.

Fuente

2010-11-10 23:14:34 PleaseStand

+1. Sexy demo 'Por supuesto, puedes hacerlo aún mejor calculando la diferencia sobre la marcha: P –

Disminuir el ancho por dos veces el aumento frontera ..

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

echar un vistazo a http://jsfiddle.net/rBrZL/

Fuente

2010-11-10 23:23:38

Puede reducir el margen con la misma cantidad que amplían la frontera.

Si especifica una clase de CSS para el estilo de desplazamiento, puede simplemente agregar y eliminar la clase en lugar de agregar estilo en línea al elemento. De esta forma, todo el CSS está en la hoja de estilos en lugar de estar disperso en el código, lo que hace que sea más fácil de mantener.

Reescribí el código para utilizar una hoja de estilo en lugar de todos los estilos en línea:

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

Nota: Un id no debe comenzar con un dígito, como por ejemplo 160x600.

Fuente

2010-11-10 23:30:08 Guffa

Puede usar "boceto" en lugar de borde, la compatibilidad con el navegador es correcta.

Fuente

2010-11-11 07:53:59 Rimantas

Javascript - Cambiar el ancho del borde sin mover elementos circundantes.

Respuesta

Cuestiones relacionadas