Devo fare un calcolo numerico basato sulle proprietà CSS. Tuttavia, quando lo utilizzo per ottenere informazioni:
$(this).css('marginBottom')restituisce il valore '10px'. C'è un trucco per ottenere solo la parte numerica del valore, indipendentemente dal fatto che sia pxo %o emo qualunque cosa?
Risposte:
Questo pulirà tutte le non cifre, non punti e segni non negativi dalla stringa:
$(this).css('marginBottom').replace(/[^-\d\.]/g, '');AGGIORNATO per valori negativi
/[^-\d\.]/g
parseInt($(this).css('marginBottom'), 10);parseInt ignorerà automaticamente le unità.
Per esempio:
var marginBottom = "10px";
marginBottom = parseInt(marginBottom, 10);
alert(marginBottom); // alerts: 10parseInttenere conto del caso in cui ricevi un valore non intero, come nella risposta di maximelebreton .
Con il metodo di sostituzione, il valore css è una stringa e non un numero.
Questo metodo è più pulito, semplice e restituisce un numero:
parseFloat($(this).css('marginBottom'));%, em)
parseFloat($(this).css('marginBottom'))Anche se marginBottom è definito in em, il valore all'interno di parseFloat sopra sarà in px, in quanto è una proprietà CSS calcolata.
$(this).css('marginBottom').replace('px','')pxma ti viene dato emdevi convertire.
Uso un semplice plugin jQuery per restituire il valore numerico di ogni singola proprietà CSS.
Si applica parseFloatal valore restituito dal valore predefinito di jQuerycss metodo .
Definizione del plugin:
$.fn.cssNum = function(){
return parseFloat($.fn.css.apply(this,arguments));
}Uso:
var element = $('.selector-class');
var numericWidth = element.cssNum('width') * 10 + 'px';
element.css('width', numericWidth);Supponiamo che tu abbia una proprietà margin-bottom impostata su 20px / 20% / 20em. Per ottenere il valore come numero ci sono due opzioni:
Opzione 1:
parseInt($('#some_DOM_element_ID').css('margin-bottom'), 10);La funzione parseInt () analizza una stringa e restituisce un numero intero. Non modificare i 10 trovati nella funzione sopra (nota come "radix") se non sai cosa stai facendo.
Esempio di output sarà: 20 (se il margine inferiore è impostato in px) per% ed em produrrà il numero relativo in base alla dimensione dell'elemento / carattere padre corrente.
Opzione 2 (preferisco personalmente questa opzione)
parseFloat($('#some_DOM_element_ID').css('margin-bottom'));Esempio di output sarà: 20 (se il margine inferiore è impostato in px) per% ed em produrrà il numero relativo in base alla dimensione dell'elemento / carattere padre corrente.
La funzione parseFloat () analizza una stringa e restituisce un numero in virgola mobile.
La funzione parseFloat () determina se il primo carattere nella stringa specificata è un numero. In tal caso, analizza la stringa fino a raggiungere la fine del numero e restituisce il numero come numero, non come stringa.
Il vantaggio dell'opzione 2 è che se si ottengono i numeri decimali restituiti (ad es. 20.32322px) si otterrà il numero restituito con i valori dietro il punto decimale. Utile se è necessario restituire numeri specifici, ad esempio se il margine inferiore è impostato in em o %
Id per:
Math.abs(parseFloat($(this).css("property")));marginè negativo o positivo!
Il modo più semplice per ottenere la larghezza dell'elemento senza unità è:
target.width()Puoi implementare questo jQuery molto semplice plugin :
Definizione del plugin:
(function($) {
$.fn.cssValue = function(p) {
var result;
return isNaN(result = parseFloat(this.css(p))) ? 0 : result;
};
})(jQuery);È resistente ai NaNvalori che possono verificarsi nella vecchia versione di IE (tornerà 0invece)
Uso:
$(this).cssValue('marginBottom');Godere! :)
var result; return isNaN(result = parseFloat(this.css(p))) ? 0 : result;
Se è solo per "px" puoi anche usare:
$(this).css('marginBottom').slice(0, -2);uso
$(this).cssUnit('marginBottom');che restituiscono un array. il primo indice restituisce il valore del margine inferiore (esempio 20 per 20 px ) e il secondo indice restituisce l'unità del margine inferiore (esempio px per 20 px )