CSS failų savybių skaitymas JavaScript

Savybes, nustatytas CSS faile, galima nuskaityti naudojant specialią funkciją getComputedStyles.

Pažiūrėkime, kaip tai daroma. Tarkime, kad turime šį elementą:

<div id="elem">
	text
</div>

Tarkime, kad šiam elementui yra nustatyti šie stiliai:

#elem {
	width: 100px;
	color: red;
	font-size: 20px;
}

Gaukime nuorodą į elementą kintamajame:

let elem = document.querySelector('#elem');

Dabar perduokime nuorodą į gautą elementą kaip parametrą funkcijai getComputedStyles:

let computedStyle = getComputedStyle(elem);

Rezultate gausime objektą, kuriame yra CSS savybių reikšmės mūsų elementui. Perskaitykime jo pagalba, pavyzdžiui, spalvą:

console.log(computedStyle.color); // išves 'red'

O dabar plotį:

console.log(computedStyle.width); // išves '100px'

O dabar šrifto dydį:

console.log(computedStyle.fontSize); // išves '20px'

Elementui yra nustatyti šie stiliai:

#elem {
	width: 200px;
	height: 200px;
}

Paspaudus mygtuką, išveskite elemento plotį ir aukštį.

Elementui yra nustatyti šie stiliai:

#elem {
	width: 200px;
	height: 200px;
}

Paspaudus mygtuką, padidinkite elemento plotį ir aukštį du kartus.