ფუნქცია getComputedStyle

ფუნქცია getComputedStyle საშუალებას გაძლევთ მიიღოთ ელემენტის ნებისმიერი CSS თვისების მნიშვნელობა, თუნდაც CSS ფაილიდან.

სინტაქსი

let ობიექტი = getComputedStyle(ელემენტი);

დეტალები

როგორ მუშაობს ის (ყურადღება: არა ისე, როგორც ჩვენ ველით): პარამეტრად ფუნქცია იღებს ელემენტს, და აბრუნებს ობიექტს, რომელიც შეიცავს თავის თავში გადაცემული ელემენტის ყველა CSS თვისებას. მოდით ეს ობიექტი ჩავდოთ ცვლადში style. სახელი თვითნებურია, ეს უბრალოდ ცვლადია - როგორ მოვიფიქრებთ, ისე დავუკავშირდებით:

let elem = document.querySelector('#elem');
let style = getComputedStyle(elem); // style-ში დევს CSS თვისებები

მოდით გამოვიტანოთ, მაგალითად, სიგანე. ეს კეთდება ასე - style.width:

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

let style = getComputedStyle(elem);
console.log(style.width);

რომ გამოვიტანოთ, მაგალითად, მარცხენა padding - ვაკეთებთ ასე - style.paddingLeft:

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

let style = getComputedStyle(elem);
console.log(style.paddingLeft);

შემდეგ მაგალითში ჩვენ გამოვიტანთ ყველა იმ CSS თვისებას, რომელიც გვაინტერესებს ჩვენი ელემენტისთვის:

<div id="elem">ტექსტი</div>

#elem {
	width: 200px;
	height: 200px;
	padding: 30px;
	border: 20px solid #BCBCBC;
	overflow: auto;
}

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

let style = getComputedStyle(elem);
console.log('paddingLeft: ' + style.paddingLeft); // გამოიტანს '30px'
console.log('borderTopWidth: ' + style.borderTopWidth); // გამოიტანს '20px'
console.log('borderTopStyle: ' + style.borderTopStyle); // გამოიტანს 'solid'

getComputedStyle-ის უზუსტობა

ზოგჯერ ფუნქცია getComputedStyle მუშაობს არასრულიად კორექტულად სიგანესთან და სიმაღლესთან. ეს იმით არის გამოწვეული, რომ padding და საზღვარი აფართოებენ ბლოკს. შემდეგ მაგალითში ბლოკს დაუსახელებია სიგანე 200px, ასევე საზღვარი და border. ბლოკის რეალური სიგანე 300px, მაგრამ getComputedStyle მაინც გამოიტანს 200px:

<div id="elem">ტექსტი</div>

#elem {
	width: 200px;
	height: 200px;
	padding: 30px;
	border: 20px solid #BCBCBC;
	overflow: auto;
}

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

let style = getComputedStyle(elem);
console.log('width: ' + style.width); // გამოიტანს '200px'
console.log('height: ' + style.height); // გამოიტანს '200px'

ანუ: გამოდის, რომ getComputedStyle უგულებელყოფს ბლოკის გაფართოებას და აჩვენებს მის ზომებს ისე, თითქოს ეს გაფართოება არ ყოფილიყო. მაგრამ ეს ჯერ ყველაფერი არ არის: ასევე მნიშვნელობა აქვს გადახვევის ზოლის არსებობას ან არარსებობას - ზოგიერთი ბრაუზერი აკლებს გადახვევის ზოლის სიგანეს სიგანეს, რომელიც გამოითვლება getComputedStyle-ის მეშვეობით, ზოგიერთი კი არ აკლებს. საერთოდ აქ საერთოდ ყველაფერი არაა cross-browser და უკეთესია getComputedStyle სიგანის და სიმაღლის დასადგენად არ გამოიყენოთ, არამედ ისარგებლოთ მეტრიკებით, რომლებსაც ჩვენ ცოტა ხანში შევისწავლით.

გამოთვლილი მნიშვნელობები

არის კიდევ ერთი ნიუანსი: თუ სიგანე მითითებულია %-ში - მაშინ getComputedStyle-ის მუშაობის შემდეგ ჩვენ ვნახავთ მას px-ში. ანუ არსებითად ჩვენ ვიღებთ არა მითითებულ სიგანეს, არამედ გამოთვლილს. ნახეთ შემდეგ მაგალითზე:

<div id="elem">ტექსტი</div>

#elem {
	width: 30%; /* სიგანე მითითებულია %-ში */
	height: 200px;
	padding: 30px;
	border: 20px solid #BCBCBC;
	overflow: auto;
}

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

let style = getComputedStyle(elem);
console.log('width: ' + style.width); // გამოიტანს სიგანეს px-ში

ასევე იხილეთ

თვისება cssText,
რომელიც მასიურად ასახელებს CSS სტილებს