jQuery 操作元素的宽高

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());