È facile impostare valori CSS in linea con javascript. Se voglio cambiare la larghezza e ho html come questo:
<div style="width: 10px"></div>Tutto quello che devo fare è:
document.getElementById('id').style.width = value;Cambierà i valori del foglio di stile in linea. Normalmente questo non è un problema, perché lo stile inline sovrascrive il foglio di stile. Esempio:
<style>
#tId {
width: 50%;
}
</style>
<div id="tId"></div>Utilizzando questo Javascript:
document.getElementById('tId').style.width = "30%";Ottengo quanto segue:
<style>
#tId {
width: 50%;
}
</style>
<div id="tId" style="width: 30%";></div>Questo è un problema, perché non solo non voglio cambiare i valori inline, se cerco la larghezza prima di impostarla, quando ho:
<div id="tId"></div>Il valore restituito è Null, quindi se ho Javascript che ha bisogno di conoscere la larghezza di qualcosa per fare un po 'di logica (aumento la larghezza dell'1%, non a un valore specifico), ritorno Null quando mi aspetto la stringa "50% "non funziona davvero.
Quindi la mia domanda: ho valori in uno stile CSS che non si trovano in linea, come posso ottenere questi valori? Come posso modificare lo stile invece dei valori inline, dato un id?