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');
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','');
Comentarios
Más rápido para el navegador y resistente a errores: $marginR = parseInt($(‘.search-form’).css(‘margin-right’))
Igualmente se puede conseguir con :
$marginR = parseInt($(‘.search-form’).css(‘margin-right’));
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’);
(function($) {
$.fn.margin = function(side) {
return parseInt($(this).css(‘margin-‘+side));
};
})(jQuery);
$marginR = $(‘.search-form’).margin(‘right’);