getComputedStyle Ֆունկցիան

getComputedStyle ֆունկցիան թույլ է տալիս ստանալ տարրի ցանկացած CSS հատկության արժեքը, նույնիսկ CSS ֆայլից:

Շարահյուսություն

javascriptlet օբյեկտ = getComputedStyle(տարր);

Մանրամասներ

Ինչպես է այն աշխատում (ուշադրություն. ոչ այնպես, ինչպես մենք ակնկալում ենք). պարամետրով ֆունկցիան ընդունում է տարրը, և վերադարձնում է մի օբյեկտ, որը պարունակում է փոխանցված տարրի բոլոր CSS հատկությունները: Եկեք դնենք այս օբյեկտը փոփոխականի մեջ style: Անվանումը կամայական է, սա պարզապես փոփոխական է - ինչպես կհորինենք, այնպես էլ կդիմենք.

javascriptlet elem = document.querySelector('#elem');
let style = getComputedStyle(elem); // style-ում գտնվում են CSS հատկությունները

Եկեք արտածենք, օրինակ, լայնությունը: Դա արվում է այսպես - style.width.

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

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

Արտածելու համար, օրինակ, ձախ padding - անում ենք այսպես - style.paddingLeft.

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

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

Հաջորդ օրինակում մենք կարտածենք մեզ հետաքրքրող բոլոր CSS հատկությունները մեր տարրի համար.

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

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

javascriptlet 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.

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

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

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

let style = getComputedStyle(elem);
console.log('width: ' + style.width); // կարտածի '200px'
console.log('height: ' + style.height); // կարտածի '200px'

Այսինքն. ստացվում է, որ getComputedStyle-ը անտեսում է բլոկի ընդլայնումը և ցույց է տալիս նրա չափերը այնպես, կարծես այդ ընդլայնումը չլիներ: Բայց սա դեռ ամենը չէ. նաև նշանակություն ունի Ոլորման գոտու առկայությունը կամ բացակայությունը - որոշ բրաուզերներ հանում են ոլորման գոտու լայնությունը getComputedStyle-ի միջոցով հաշվարկված լայնությունից, իսկ որոշները չեն հանում: Ընդհանրապես, այստեղ ամեն ինչ ոչ խաչաձեւ բրաուզերային է և ավելի լավ է getComputedStyle-ը լայնություն և բարձրություն որոշելու համար չօգտագործել, այլ օգտագործել մետրիկաները, որոնք մենք կուսումնասիրենք քիչ ավելի ուշ:

Հաշվարկված արժեքներ

Կա ևս մեկ նրբերանգ. եթե լայնությունը նշված է %-ով - ապա getComputedStyle-ի աշխատանքից հետո մենք կտեսնենք այն px-ով: Այսինքն, ըստ էության մենք ստանում ենք ոչ թե նշված լայնությունը, այլ հաշվարկվածը: Նայեք հաջորդ օրինակին.

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

css#elem {
  width: 30%; /* լայնությունը նշված է %-ով */
  height: 200px;
  padding: 30px;
  border: 20px solid #BCBCBC;
  overflow: auto;
}

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

let style = getComputedStyle(elem);
console.log('width: ' + style.width); // կարտածի լայնությունը px-ով

Տես նաև