Voglio ottenere la larghezza di un elemento in percentuale. Sto usando la seguente funzione per ottenere lo stile ma dà il valore in pixel. Qui lo stile variabile può essere qualsiasi proprietà CSS come larghezza, altezza eccCome ottenere valore di proprietà css in puro javascript
this.getStyle = function(style) {
var elementStyle = window.getComputedStyle(that.element);
var value = elementName.getPropertyValue(style);
return value;
}
sembra che stai cercando
that.element.style.width
that.element.style.height
etc
Funziona solo se 'css' è in linea come:'
@MoshFeu funziona anche se il CSS non è definito in linea con gli ultimi Firefox e Chromium (testato con Firefox 56 e Chromium 62). Ma penso che dipenda dalla proprietà CSS, ad esempio quando si usa un foglio di stile CSS, posso accedere a larghezza e altezza tramite element.style ma non per la proprietà border: https://stackoverflow.com/questions/10675885/get-set -css-property-values-via-javascript-questions – baptx
Grazie! buono a sapersi .. –
Hai provato qualcosa di simile:
var width = (100 * parseFloat($('.largeField').css('width'))/parseFloat($('.largeField').parent().css('width'))) + '%';
come si scrive in javascript puro? –
Penso che ottieni sempre pixel, anziché% di larghezza. Il motivo è mentre il rendering dell'oggetto imposta sempre la larghezza fisica in base a% che abbiamo dato, questo è possibile verificare tramite dom. Javascript uso DOM(Document Object Model), mentre jQuery è possibile utilizzare Dom e prima caricare proprietà via document.getready().
Così come sopra è possibile ottenere la proprietà, ma in pixel.
document.getElementById('yourdivname').element.style.width
o
div2 = document.getElementById('div2');
alert("Width of div2 with style = " + div2.style.width);
Getting the width of an html element in percent % with jQuery
Questo è interessante:
$ (document) .ready è un evento di jQuery per essere attivato dopo l'HTML documento è stato caricato vs onload è un built-in eventi DOM da attivato dopo tutti i contenuti siano stati installati . Così l'evento ready sarebbe normalmente fuoco prima di quanto l'evento onload, permettendo l'esecuzione di codice il più presto possibile, senza dover attendere per tutte le attività di essere pienamente caricato
Per maggiori informazioni: - fare clic su questo link.
Come si imposta la larghezza? – Kiril
Che ne dici di fare un calcolo manuale della% usando il valore della larghezza del pixel dell'elemento genitore? –
ho impostato la larghezza in percentuale come 'larghezza: 100%' –