outerheight - jquery height

Añadiendo píxeles a jquery.css() propiedad izquierda

Question

Este es mi código:

var lef=$(this).css("left");
var top=$(this).css("top");
alert(lef);
$(this).after("<div class=''edit cancel'' style=''position:absolute;top:"+top+";left:"+lef+"''>Cancel</div>");

Ahora la declaración var lef=$(this).css("left") + 150 , no parece funcionar. Quiero obtener la propiedad de la izquierda y agregarle 150 píxeles.

Cómo puedo hacer esto ?

Gracias.

Answer 1

A partir de jQuery 1.6, puede hacer esto más fácilmente simplemente sumando o restando del valor actual. Por ejemplo, para agregar 150px:

$(this).css("left", "+=150")

http://api.jquery.com/css/#css-properties

A partir de jQuery 1.6, .css () acepta valores relativos similares a .animate (). Los valores relativos son una cadena que comienza con + = o - = para aumentar o disminuir el valor actual. Por ejemplo, si el relleno de un elemento a la izquierda era 10px, .css ("padding-left", "+ = 15") resultaría en un relleno total a la izquierda de 25px.

Answer 2

Aquí está la manera más fácil (para el caso general):

var lef = parseInt($(this).css("left")) + 150; // add 150
var top = parseInt($(this).css("top")); //also parseInt top for consistency
alert(lef);
$(this).after("<div class=''edit cancel'' style=''position:absolute;top:"+top+"px;left:"+lef+"px''>Cancel</div>");
//                                                                          ^^px           ^^px

http://api.jquery.com/css/#css-properties

A partir de jQuery 1.6, .css() acepta valores relativos similares a .animate() . Los valores relativos son una cadena que comienza con += o -= para aumentar o disminuir el valor actual. Por ejemplo, si el relleno de un elemento a la izquierda era 10px, .css .css( "padding-left", "+=15" ) resultaría en un relleno total a la izquierda de 25px.

Si necesita hacerlo "manualmente" (por ejemplo, como parte de la creación de un nuevo elemento):

jQuery.fn.addPixelsTo = function(property, pxls) {    
     return $(this[0]).css(property, (parseInt($(this[0]).css(property).substr(0,2))+pxls)+''px'');
}

parseInt usar parseInt porque .css(''left'') devuelve 150px . Luego, debe volver a colocar la px como parte del estilo en línea.

Answer 3

He simplificado la respuesta treintadot. Puede usar esta función jQuery para cualquier propiedad que desee agregar píxeles.

$(''#element'').addPixelsTo(''border-top-width'', 30);

Ejemplo:

var WinW=jQuery(window).width();
var lft =parseInt(WinW/2);
jQuery(".div").css("left" , (lft));

Answer 4

poder intentar

$(this).css("left", function(){ return ($(this).css("left")+150); });

para cualquier modificación compleja también

Answer 5

prueba esto

$(this).css("left", function(){
return ($(this).css("left")+150);
});

pondrá el div en el centro de una página, entonces funcionará bien ...

Answer 6

var lef=$(this).css("left")

Esta línea devuelve una cadena, con la que está concatenando 150 por el operador + . Debe convertir la cadena $(this).css("left") a un número primero.

Una demo jsfiddle para probar mi punto.

Entonces, puedes hacer esto de la siguiente manera:

var lef = partInt($(this).css("left")) + 150;

Ahora obtendrá la adición en lugar de concatenación de cadenas.