Esempi CSS posizione e dimensione

Dimensioni e posizioni di Box1:

• .width() larghezza (200)
• .innerWidth() larghezza interna (200+10+10)
• .outerWidth() larghezza esterna (200+10+10+1+1)
• .offset() posizione sinistra rispetto al documento (41+30)
• .position() posizone sinistra rispetto a #contenitore (30)

Larghezza di Box2 .width(valore):

• aumenta di 10px
• diminiusci di 10px

#box1 {
width:200px;
height:100px;
top:30px;
left:30px;
border:1px solid #999;
padding:10px;
}

Codice:

function test_width () {
	var dim = $("#box1").width();
	alert(dim);
}

function test_innerWidth () {
	var dim = $("#box1").innerWidth();
	alert(dim);
}

function test_outerWidth () {
	var dim = $("#box1").outerWidth();
	alert(dim);
}

function test_offset_left () {
	var dim = $("#box1").offset().left;
	alert(dim);
}

function test_position_left () {
	var dim = $("#box1").position().left;
	alert(dim);
}



function aumenta_width () {
	var dim = $("#box2").width(); //trova la larghezza
	$("#box2").width(dim+10); //aumentala di 10
}
function diminiusci_width () {
	var dim = $("#box2").width(); //trova la larghezza
	$("#box2").width(dim-10); //diminiuscila di 10
}