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

Háptica en iOS

iPad, iPad, iPad… otro nuevo dispositivo para cautivar a los ávidos consumidores, pero que por lo menos trae interesantes nuevas tecnologías. Aparte de que crean que es un iPhone gigante, tiene varias innovaciones que permiten darle mucha rienda a la imaginación de los creadores de contenido específico para esta plataforma. Una de las que más [...]

Muerte a IE: nuevo plugin

Al parecer ando inspirado y con ganas de aportar más y más a la comunidad de desarrollo web del universo. Y con el afán de aumentar a los usuarios disidentes de Internet Explorer 6 y 7 (browser que también apesta), he creado un nuevo y simpático plugin que espero ayude a que más usuarios se [...]

Construir para Retina Display

Construir para Retina Display

Desde la salida del Retina Display, se duplicó la densidad de pixeles que utilizábamos para diseñar y construir sitios webs para iPhone. Aunque si seguías utilizando los acostumbrados 480x320px de las pantallas anteriores, se nota bastante el pixel en estos nuevos teléfonos. Pero si trabajas para la nueva resolución de 960x640px, ¿qué haces con los [...]

  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