მეთოდი innerWidth

მეთოდი innerWidth საშუალებას აძლევს მიიღოს და შეცვალოს ელემენტის სიგანე მისი შიდა ველების გათვალისწინებით. მნიშვნელოვანია გვახსოვდეს, რომ ჩვენ ვიღებთ 'გამოთვლილ მნიშვნელობას' სიგანის (computed width). შეცდომები გამოთვლაში ასევე შეიძლება წარმოიშვას, თუ მომხმარებელი ცვლის გვერდის ზომებს და ასევე, თუ ელემენტი ან მისი მშობელი დამალულია. სიგანის მნიშვნელობა არ ითვალისწინებს ელემენტის საზღვრის სისქეს.

სინტაქსი

ელემენტის სიგანის მიღება. ზოგიერთ შემთხვევაში მიღებული მნიშვნელობები შეიძლება იყოს წილადი:

$(სელექტორი).innerWidth();

ელემენტის სიგანის შესაცვლელად - შეგიძლიათ გადასცეთ უბრალოდ რიცხვი (მაგალითად 400), მაშინ საზომი ერთეულები იქნება პიქსელები, ან სტრიქონი, საზომი ერთეულების მითითებით (მაგალითად '10em'):

$(სელექტორი).innerWidth(ახალი მნიშვნელობა);

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

$(სელექტორი).innerWidth(function(ნომერი ნაკრებში, სიგანის მიმდინარე მნიშვნელობა));

მაგალითი

მოდით შედარებისთვის გამოვიტანოთ ინფორმაცია აბზაცის #test სიგანეზე, მიღებული მეთოდებით width და innerWidth:

<p id="test">ტექსტი</p>
<p id="out1"></p>
<p id="out2"></p>

p {
	margin: 10px;
	padding: 5px;
	border: 2px solid blue;
}

let w1 = $('#test').width();
let w2 = $('#test').innerWidth();

$('#out1').text(w1);
$('#out2').text(w2);

ჩვენ დავინახავთ განსხვავებას 10px-ში, რაც არის ჩვენი მარცხენა და მარჯვენა შიდა ველების ჯამი.

იხილეთ ასევე

მეთოდი width,
რომელიც საშუალებას აძლევს მიიღოს და შეცვალოს ელემენტის სიგანე
მეთოდი outerWidth,
რომელიც საშუალებას აძლევს მიიღოს და შეცვალოს ელემენტის სიგანე, მისი ველების და საზღვრის გათვალისწინებით