CSS ფაილებიდან თვისებების წაკითხვა JavaScript-ში

CSS ფაილში მითითებული თვისებების წაკითხვა შესაძლებელია სპეციალური ფუნქციის getComputedStyles გამოყენებით.

მოდით ვნახოთ, როგორ კეთდება ეს. დავუშვათ, გვაქვს შემდეგი ელემენტი:

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

დავუშვათ, ამ ელემენტისთვის განსაზღვრულია შემდეგი სტილები:

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

მოდით მივიღოთ ელემენტის მითითება ცვლადში:

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

ახლა გადავცეთ მიღებული ელემენტის მითითება პარამეტრის სახით ფუნქციას getComputedStyles:

let computedStyle = getComputedStyle(elem);

შედეგად ჩვენ მივიღებთ ობიექტს, რომელიც შეიცავს ჩვენი ელემენტის CSS თვისებების მნიშვნელობებს. მოდით მისი დახმარებით წავიკითხოთ, მაგალითად, ფერი:

console.log(computedStyle.color); // გამოიტანს 'red'

ახლა კი სიგანე:

console.log(computedStyle.width); // გამოიტანს '100px'

ახლა კი ფონტის ზომა:

console.log(computedStyle.fontSize); // გამოიტანს '20px'

ელემენტისთვის განსაზღვრულია შემდეგი სტილები:

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

ღილაკზე დაწკაპუნებით გამოიტანეთ ელემენტის სიგანე და სიმაღლე.

ელემენტისთვის განსაზღვრულია შემდეგი სტილები:

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

ღილაკზე დაწკაპუნებით გაზარდეთ ელემენტის სიგანე და სიმაღლე ორჯერ.