jQuery操作元素的宽高

  • width() height()
  • innerWidth() innerHeight()
  • outerWidth() outerHeight()
  • 获取页面可视区域的宽高


width() height()

获取元素宽高
jQuery对象.width()
jQuery对象.height()

console.log($("#one").width());
console.log($("#one").height());

设置元素宽高
jQuery对象.width(宽度)
jQuery对象.height(高度)

$("#one").width(300);
$("#one").height(300);

innerWidth() innerHeight()

这两个方法是返回包含内边距的宽度和高度
获取元素宽高
jQuery对象.innerWidth()
jQuery对象.innerHeight()

console.log($("#one").innerWidth());
console.log($("#one").innerHeight());

设置元素宽高
jQuery对象.innerWidth(宽度)
jQuery对象.innerHeight(高度)

$("#one").innerWidth(300);
$("#one").innerHeight(300);

outerWidth() outerHeight()

用来获取包括元素宽高 内边距 和边框的宽度和高度
获取元素宽高
jQuery对象.outerWidth()
jQuery对象.outerHeight()

console.log($("#one").outerWidth());
console.log($("#one").outerHeight());

jQuery对象.outerWidth(true或者false)
jQuery对象.outerHeight(true或者false)
参数默认是false
给了参数true 就要包含外边距

console.log($("#one").outerWidth(true));
console.log($("#one").outerHeight(true));

设置元素宽高
用的极少

$("#one").outerWidth(300); 
$("#one").outerHeight(300);

获取页面可视区域的宽高

$(window).width()
$(window).height()

console.log($(window).width());
console.log($(window).height());