JS与JQ — 元素尺寸的获取和设置
原生JS总结：
- 原生JS获取元素content部分的宽高 – window.getComputedStyle([元素对象]).width/height || 元素对象.style.width/height；
- 原生JS获取元素content部分+padding填充部分x2 – [元素对象].clientWidth/clientHeight；
- 原生JS获取元素content部分+padding填充部分x2+border边框x2 – [元素对象]. offsetWidth/offsetHeight；
- 原生JS获取元素内容content部分、padding内边距和溢出尺寸 – [元素对象].scrollWidth/scrollHeight；
原生JS尺寸位置实例图：（可先看有关尺寸的方法）
JQuery总结：
- JQuery获取元素content部分的宽高 – $(‘元素’).width()/height()；
- JQuery获取元素content部分+padding填充部分x2 – $(‘元素’).innerWidth()/innerHeight()；
- JQuery获取元素content部分+padding填充部分x2+border边框x2 – $(‘元素’).outerWidth()/outerHeight()；
关于JS/JQ中元素尺寸的特点：
- 原生JS中拿到的元素宽度有两种，返回的都是String类型，前者的getComputedStyle只能取不能读，后者的element.style是可以读，也可以设置；
- 注意getComputedStyle是有兼容性问题的，他可以读一开始的样式，但是重新设置的样式是取不到的，而element.style则只能取到元素行内样式，对于内外联样式是取不到的，具体看代码；
- 对于有滚动条的元素来说，JS中的clientWidth/clientHeight是不包括滚动条的宽度后者高度的，所以我们拿到的client值是减去滚动条的宽高后的值 | | 但是要注意JQ中的innerWidth/innerHeight却是包括滚动条的宽高的，也在主流的浏览器测试过；
- 对于无溢出尺寸时，scrollWidth/scrollHeight 是等于 clientWidth/clientHeight的；
代码展示：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<script src="../jquery-1.12.2.js"></script>
<style>
*{
margin: 0;
padding: 0;
}
.father{
position: relative;
width: 200px;
height: 200px;
border: 50px solid #ee8096;
background: skyblue;
margin-left: 50px ;
}
.child{
position: absolute;
overflow: auto;
white-space: nowrap;
width: 100px;
height: 100px;
background-color: rgb(133, 163, 87);
padding: 0 30px;
margin: 20px;
border: 10px solid #000;
}
</style>
<script>
$(function(){
/* 原生JS--width/clientWidth/offsetWidth/scrollWidth 获取元素实际的宽高/内容宽高 */
var btn = document.getElementsByTagName("button");
var $father = document.getElementsByClassName("father")[0];
var $child = document.getElementsByClassName("child")[0];
// 注意：封装--IE支持element.currentStyle[attr],谷歌和火狐支持window.getComputedStyle(obj,ov伪元素)[attr];
function getStyle(obj,attr){
if(!obj) throw new Error("Parameter missing: Please pass in the first parameter correctly --obj!");
if(!attr) throw new Error("Parameter missing: Please pass in the second parameter correctly --attr!");
if(obj.currentStyle){
return obj.currentStyle[attr];
}else{
return window.getComputedStyle(obj,false)[attr];
}
}
var contentWidth = getStyle($child,'width');
var parentHeight = getStyle($father,'height')
btn[0].onclick = function(){
// 1.String类型（带px单位,只包括元素content部分,并且只获取内联/外联style中设置的宽高,对于行内style的样式不读取）
console.log("JS--child--Width",contentWidth); // 83px || 83px --ps:第二个参数是点击设置按钮后的再获取尺寸
console.log("JS--father--Height",parentHeight); // 250px || 250px --ps：重新使用设置的style是不影响getComputedStyle的,但是一开始写在行内样式的会覆盖内联的样式
// 1.1String类型（和上面不同的是，元素的宽高是行内style，对于内联/外联style中的写好的宽高是拿不到的）
console.log("JS-child--widthStyle",$child.style.width); // 空 || 200px
console.log("JS-child--widthType",typeof($child.style.width)); // 没拿到值时,此时也是string类型
console.log("JS--father--heightStyle",$father.style.height); // 250px || 300px
// 2.Number类型（内容的宽高content部分+padding填充部分*2,不包括boder边框和margin外边距 || 不包括滚动条17PX）
console.log("JS--child--clientWidth",$child.clientWidth); // 143 || 243
console.log("JS--child--clientHeight",$child.clientHeight); //
console.log("JS--father--clientHeight",$father.clientHeight); // 250 || 300
// 3.Numeber类型（包括元素内容content部分+padding内边距*2+border边框*2,不包括margin外边距）
console.log("JS--child--offsetWidth",$child.offsetWidth); // 180 || 280
console.log("JS--father--offsetHeight",$father.offsetHeight); // 350 || 400
// 4.Number类型（包括元素内容content部分、padding内边距和溢出尺寸,不包括border边框和margin外边距 || 无溢出的情况,与clientWidth、clientHeight相同）
console.log("JS--child--scrollWidth",$child.scrollWidth); // 189 || 243
console.log("JS--child--scrollHeight",$child.scrollHeight); // 273 || 273
}
btn[1].onclick = function(){
console.log("-------------------设置前后--------------------");
$child.style.width = "200px";
$father.style.width = "300px";
$father.style.height = "300px";
}
/* JQ--width()/innerWidth()/outerWidth() 获取元素实际的宽高 */
$("button").eq(0).click(function(){
// 1.Number类型 (content内容宽高 || 同步读取当前元素在行内，内联外联的最终宽高)
console.log("JQ--child--Width",$(".child").width()); // 100 || 200
console.log("JQ--father--Height",$(".father").height()); // 250 || 300
// 2.Number类型（内容的宽高content部分+padding填充部分*2,不包括boder边框和margin外边距 || 包括滚动条））
console.log('JQ--child--innerWidth',$(".child").innerWidth()); // 160 || 260
console.log('JQ--child--innerHeight',$(".child").innerHeight()); // 100 || 100
console.log('JQ--father--innerWidth',$(".father").innerWidth()); // 200 || 300
console.log('JQ--father--innerHeight',$(".father").innerHeight()); // 250 || 300
// 3. Number类型（包括元素内容content部分+padding内边距*2+border边框*2,不包括margin外边距）
console.log("JQ--child--outerWidth",$(".child").outerWidth()); // 180 || 280
console.log('JQ--child--outerHeight',$(".child").outerHeight()); // 120 || 120
console.log("JQ--father--outerWidth",$(".father").outerWidth()); // 300 || 400
console.log("JQ--father--outerHeight",$(".father").outerHeight()); // 350 || 400
})
$("button").eq(1).click(function(){
console.log("-------------------设置前后--------------------");
$(".child").width("200px");
$(".father").width("300px");
$(".father").height("300px");
})
})
</script>
<body>
<div class="father" style="height: 250px">
<div class="child">
JS--JQ的尺寸总结<br>
JS--JQ的尺寸总结<br>
JS--JQ的尺寸总结<br>
JS--JQ的尺寸总结<br>
JS--JQ的尺寸总结<br>
JS--JQ的尺寸总结<br>
JS--JQ的尺寸总结<br>
JS--JQ的尺寸总结<br>
JS--JQ的尺寸总结<br>
JS--JQ的尺寸总结<br>
JS--JQ的尺寸总结<br>
JS--JQ的尺寸总结<br>
JS--JQ的尺寸总结<br>
</div>
</div>
<button>获取</button>
<button>设置</button>
</body>
</html>
9885
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
