標籤：web jquery width innerwidth outerwidth
test.html
<html><head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <style>#box1{width:200px;height:200px;background-color:pink;padding:20px;margin:30px;box-sizing:border-box;border:1px solid red;}#box2{width:200px;height:200px;background-color:#ececec;padding:20px;margin:30px;box-sizing:content-box;border:1px solid red;}</style> <script src="jquery-1.11.3.min.js"></script></head><body><div id="box1"></div><div id="box2"></div><script>console.log("box1 info ... ");console.log("inner width:"+$("#box1").innerWidth());console.log("width:"+$("#box1").width());console.log("outer inner width:"+$("#box1").outerWidth());console.log("outer inner true width:"+$("#box1").outerWidth(true));console.log("css width:"+$("#box1").css("height"));console.log("box2 info ... ");console.log("inner width:"+$("#box2").innerWidth());console.log("width:"+$("#box2").width());console.log("outer inner width:"+$("#box2").outerWidth());console.log("outer inner true width:"+$("#box2").outerWidth(true));console.log("css width:"+$("#box2").css("height"));</script></body></html>
結果
box1 info ... inner width:198width:158outer inner width:200outer inner true width:260css width:200pxbox2 info ... inner width:240width:200outer inner width:242outer inner true width:302css width:200px
jquery width,innerWidth,outerWidth 區別
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
