È facile modificare gli stili degli elementi ma è difficile leggere il valore.
JavaScript non è in grado di leggere alcuna proprietà di stile dell'elemento (elem.style) proveniente da CSS (interno / esterno) a meno che non si usi la chiamata al metodo integrata getComputedStyle in javascript.
getComputedStyle (element [, pseudo])
Elemento: l'elemento per cui leggere il valore.
pseudo: uno pseudo-elemento, se necessario, ad esempio :: before. Una stringa vuota o nessun argomento indica l'elemento stesso.
Il risultato è un oggetto con proprietà di stile, come elem.style, ma ora rispetto a tutte le classi css.
Ad esempio, qui lo stile non vede il margine:
<head>
<style> body { color: red; margin: 5px } </style>
</head>
<body>
<script>
let computedStyle = getComputedStyle(document.body);
// now we can read the margin and the color from it
alert( computedStyle.marginTop ); // 5px
alert( computedStyle.color ); // rgb(255, 0, 0)
</script>
</body>
Quindi modificato il codice javaScript per includere getComputedStyle dell'elemento che si desidera ottenere larghezza / altezza o altro attributo
window.onload = function() {
var test = document.getElementById("test");
test.addEventListener("click", select);
function select(e) {
var elementID = e.target.id;
var element = document.getElementById(elementID);
let computedStyle = getComputedStyle(element);
var width = computedStyle.width;
console.log(element);
console.log(width);
}
}
Valori calcolati e risolti
Ci sono due concetti nei CSS:
Un valore di stile calcolato è il valore dopo l'applicazione di tutte le regole CSS e dell'ereditarietà CSS, come risultato della cascata CSS. Può apparire come altezza: 1em o dimensione carattere: 125%.
Un valore di stile risolto è quello finalmente applicato all'elemento. Valori come 1em o 125% sono relativi. Il browser prende il valore calcolato e rende tutte le unità fisse e assolute, ad esempio: altezza: 20 px o dimensione del carattere: 16 px. Per le proprietà della geometria, i valori risolti possono avere un punto mobile, ad esempio larghezza: 50,5 px.
Molto tempo fa getComputedStyle è stato creato per ottenere valori calcolati, ma si è scoperto che i valori risolti sono molto più convenienti e lo standard è cambiato.
Quindi oggigiorno getComputedStyle restituisce effettivamente il valore risolto della proprietà.
Notare che:
getComputedStyle richiede il nome completo della proprietà
Dovresti sempre chiedere la proprietà esatta che desideri, come imbottitura Sinistra o altezza o larghezza. In caso contrario, il risultato corretto non è garantito.
Ad esempio, se ci sono proprietà paddingLeft / paddingTop, cosa dovremmo ottenere per getComputedStyle (elem) .padding? Niente o forse un valore "generato" da padding noti? Non esiste una regola standard qui.
Ci sono altre incongruenze. Ad esempio, alcuni browser (Chrome) mostrano 10px nel documento seguente, e alcuni di essi (Firefox) - non:
<style>
body {
margin: 30px;
height: 900px;
}
</style>
<script>
let style = getComputedStyle(document.body);
alert(style.margin); // empty string in Firefox
</script>
per maggiori informazioni https://javascript.info/styles-and-classes