width metode

Die metode width laat toe om die wydte van 'n element te verkry en te verander. Dit is belangrik om te onthou dat ons die 'berekende waarde' van die wydte sal verkry (computed width). Anders as die metode css('width'), gee dit 'n dimensielose grootheid terug (byvoorbeeld 400) en is gerieflik vir wiskundige berekeninge. Die metode verkry die wydte van die element se inhoud, ongeag die spesifikasie van die CSS-eienskap box-sizing. Om ongerief wat hiermee verband hou te vermy, word dit aanbeveel om css('width') te gebruik. Foute in die berekening kan ook voorkom as die gebruiker die bladsygrootte verander, sowel as indien die element of sy ouer versteek is. Die wydtewaarde neem nie die waardes van spasieëring en rand in ag nie.

Sintaksis

Verkry die wydte van 'n element. In sommige gevalle kan die verkry waardes breukdele wees:

$(selektor).width();

Om die wydte van 'n element te verander - kan 'n eenvoudige nommer oorgedra word (byvoorbeeld 400), dan sal die eenhede van meet pixels wees, of 'n string, met die spesifikasie van meeteenhede (byvoorbeeld '10em'):

$(selektor).width(nuwe waarde);

Ons kan ook 'n gegewe funksie op elke element in die stel toepas. In hierdie geval sal die funksie as eerste parameter die nommer van die element in die stel kry, en as tweede parameter - die huidige waarde van die gespesifiseerde wydte vir die spesifieke element. Die waarde van this binne die funksie sal verwys na die huidige element. Die wydtewaarde van die element sal verander na dié wat deur die funksie teruggegee word:

$(selektor).width(function(nommer in stel, huidige wydtewaarde));

Voorbeeld

Kom ons verander die wydte van 'n div na die waarde 40px wanneer daarop geklik word, deur die metode width te gebruik, en ook met behulp van css verander ons sy agtergrond na groen:

<div id="toets"></div>

#toets {
	width: 90px; 
	height: 80px;
	background: red; 
	color: white;
	margin-top: 10px; 
	cursor: pointer;
}

$('#toets').one('click', function() {
	$(this).width(40).css({
		cursor: 'auto',
		backgroundColor: 'green'
	});
});

Sien ook

metode height,
wat toelaat om die hoogte van 'n element te verkry en te verander
metode innerWidth,
wat toelaat om die wydte van 'n element te verkry en te verander, met inagneming van sy interne spasieëring
metode outerWidth,
wat toelaat om die wydte van 'n element te verkry en te verander, met inagneming van sy spasieëring en rand
metode css,
wat toelaat om CSS style van 'n element te verkry en te verander