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

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

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

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

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

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

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

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

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

javascript let computedStyle = getComputedStyle(elem);

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

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

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

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

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

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

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

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