jQuery获取和设置元素宽高

发表于 | 分类于 | 阅读
  • width()和height()

获取匹配元素集合中的第一个元素的当前计算高度值 或 设置每一个匹配元素的高度值。第一个参数表示设置。(不包括内边距)

1
2
3
4
$('selector').width();//获取只包括content的宽度
$('selector').width('100px');//设置只包括content的宽度
$('selector').height();//获取只包括content的高度
$('selector').height('100px');//设置只包括content的高度
  • innerWidth()和innerWidth()

为匹配的元素集合中获取第一个元素的当前计算高度值,包括padding，但是不包括border。第一个参数表示设置。(包括内边距)

1
2
3
4
$('selector').innerWidth();//获取包括内边距的宽度
$('selector').innerWidth('100px');//获取包括内边距的宽度
$('selector').innerHeight();//获取包括内边距的高度
$('selector').innerHeight('100px');//获取包括内边距的高度
  • outerWidth()和outerHeight()

获取元素集合中第一个元素的当前计算宽度值,包括padding，border和选择性的margin。第一个参数表示设置。(包括边框)

1
2
3
4
$('selector').outerWidth();//获取包括内边距和边框的宽度
$('selector').outerWidth('100px');//获取包括内边距和边框的宽度
$('selector').outerHeight();//获取包括内边距和边框的高度
$('selector').outerHeight('100px');//设置包括内边距和边框的高度
  • outerWidth(true)outerHeight(true)

outerWidth()和outerHeight()的参数省略或者false，padding 和 border会被包含在计算中；如果参数为true，margin也会被包含在计算中 。第一个参数为值，第二个参数为true可以设置包括padding和border以及margin的宽高值(包括外边距)

1
2
3
4
$('selector').outerWidth(true);//获取包括内外边距和边框的宽度
$('selector').outerWidth('100px',true);//设置包括内外边距和边框的宽度
$('selector').outerHeight(true);//获取包括内外边距和边框的高度
$('selector').outerHeight('100px',true);//设置包括内外边距和边框的高度
0%