Tip Precoz: obtener valor numérico con JavaScript

Con jQuery constantemente necesitamos crear variables para tomar valores CSS de elementos, para luego construir nuevos elementos o interacciones; constantemente lo hago en plugins cono Timelinr o Blox!, pero JavaScript nos ofrece un método más rápido que el andar haciendo slices.

Desde el siguiente ejemplo, tomaremos la el valor CSS de margin-top del buscador de este mismo sitio; normalmente lo haríamos de esta manera:

var marginT = $('#search_container').css('margin-top');

Click para ver ejemplo 1

Ejemplo1: obtener valor numérico con JavaScript

El valor entregado efectivamente es el correcto: 10px pero lo necesitamos numérico. Para ello utilizamos replace():

var marginT = $('#search_container').css('margin-top').replace('px','');

Click para ver ejemplo 2

Ejemplo2: obtener valor numérico con JavaScript

Sobre el Autor: Jorge Epuñan

Soy quien escribe en este sitio: diseñador gráfico de profesión, desarrollador web por preferencia y amante de la interacción humano-computador. Cuando no pienso en web, salgo a trotar por mis barrios en Santiago, Chile o me junto con amigos a un bar a conversar sobre nuevas tendencias y tecnologías. Twitter profesional y personal, además del Contacto.

Relacionados

Tip precoz 8: Deshabilitar click derecho con jQuery

Puede que sea necesario, puede que algún cliente te lo pida y aunque argumentes de diferentes maneras no entienda que no es recomendable deshabilitarle opciones innatas al usuario limitándole la accesibilidad. Pero al final de cuentas, tenemos que vivir y accedemos a realizarle lo que necesita, con tal de terminar luego y entregar el proyecto [...]

Tips para desarrollos móviles

Tips para desarrollos móviles

A pasos agigantados avanza el mercado de telefonía móvil, y cada vez son más las empresas que piden proyectos web específicos para que se usen desde teléfonos celulares, o que sus sitios se vean correctamente en ellos. El problema es que, si para escritorio peleamos con una sopa de 6 browsers más comunes -Firefox, Opera, [...]

Reemplazar el texto pero mantener el elemento hermano con jQuery

Reemplazar el texto pero mantener el elemento hermano con jQuery

Problema: WordPress imprime un código HTML con el siguiente formato y necesito modificar sólo el texto, manteniendo el checkbox: <p class="login-remember"> <label> <input name="rememberme" type="checkbox" id="rememberme"> <!– mantener –> Recuérdame <!– este texto debe ser otro –> </label> </p> Primera solución: modificar el core del CMS, lo que no me interesa. ✖ Segunda solución: modificar [...]

  1. Más rápido para el navegador y resistente a errores: $marginR = parseInt($(‘.search-form’).css(‘margin-right’))

    Ayoze
    11 / Abril / 2012

  2. Igualmente se puede conseguir con :
    $marginR = parseInt($(‘.search-form’).css(‘margin-right’));

    Norke
    12 / Abril / 2012

  3. No tan precoz:

    (function($) {
    $.fn.margin = function(side) {
    var _me, _margins;
    _me = $(this);
    _margins = {
    “left”:parseInt(_me.css(‘margin-left’)),
    “right”:parseInt(_me.css(‘margin-right’)),
    “top”:parseInt(_me.css(‘margin-top’)),
    “bottom”:parseInt(_me.css(‘margin-bottom’))
    };
    return _margins[side];
    };
    })(jQuery);

    $marginR = $(‘.search-form’).margin(‘right’);

    Norke
    12 / Abril / 2012

  4. (function($) {
    $.fn.margin = function(side) {
    return parseInt($(this).css(‘margin-’+side));
    };
    })(jQuery);

    $marginR = $(‘.search-form’).margin(‘right’);

    Sergio
    17 / Abril / 2012

OJO: si vas a agregar código fuente, asegúrate de convertirlas antes a entidades HTML, sino el comentario no se renderizará correctamente.

compartido 2 veces