js的clientHeight和jQuery的innerHeight()的区别及不同浏览器兼容问题

首先, 看看js获取元素的高度与jQuery获取元素的高度的区别, 一下以clientHeight和innerHeight测试

1. js获取

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="UTF-8">
 5         <title></title>
 6         <style type="text/css">
 7             body {
 8                 position: relative;
 9             }
10             #one {
11                 /*height: 100px;*/
12                  100px;
13                 border: 1px solid red;
14             }
15             /*#one>img {
16                 height: 200px;
17             }*/
18             #two {
19                 height: 100px;
20                  100px;
21                 border: 1px solid darkblue;
22                 font-size: 150px;
23                 
24             }
25         </style>
26     </head>
27     <body>
28         <div id="one">
29             <img src="img/1.jpg"/>
30         </div>
31         <div id="two">
32         </div>
33     </body>
34     <!--<script src="js/jquery-2.2.4.min.js" type="text/javascript" charset="utf-8"></script>-->
35     <script type="text/javascript">
36 //        var one = $('#one').innerHeight();
37 //        var two = $('#two').innerHeight();
38 //        console.log(one, two);
39         var one = document.getElementById("one");
40         var two = document.getElementById("two");
41         var oneH = one.firstElementChild.offsetHeight;
42         var twoH = two.clientHeight;
43         console.log(oneH, twoH);
44     </script>
45 </html>

打印结果: 火狐浏览器下打印oneH:750, twoH:100; 而在谷歌浏览器下打印oneH: 0, two:100. 由此可以看出, 谷歌在获取元素的内部高度时, 没有把其子元素的图片高度加上. 这样说对吗? 显然, 有待斟酌......

这次我们把样式中设定的图片高度打开, 结果.....

谷歌: 火狐:

火狐和谷歌竟然一致的统一了!

此时, 可以看出, 涉及获取元素的问题, 如果内部图片要设定高度, 否则, 会出现兼容的问题

2.jQuery获取

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="UTF-8">
 5         <title></title>
 6         <style type="text/css">
 7             body {
 8                 position: relative;
 9             }
10             #one {
11                 /*height: 100px;*/
12                  100px;
13                 border: 1px solid red;
14             }
15             /*#one>img {
16                 height: 200px;
17             }*/
18             #two {
19                 height: 100px;
20                  100px;
21                 border: 1px solid darkblue;
22                 font-size: 150px;
23                 
24             }
25         </style>
26     </head>
27     <body>
28         <div id="one">
29             <img src="img/1.jpg"/>
30         </div>
31         <div id="two">
32         </div>
33     </body>
34     <script src="js/jquery-2.2.4.min.js" type="text/javascript" charset="utf-8"></script>
35     <script type="text/javascript">
36         var one = $('#one').innerHeight();
37         var two = $('#two').innerHeight();
38         console.log(one, two);
39 //        var one = document.getElementById("one");
40 //        var two = document.getElementById("two");
41 //        var oneH = one.firstElementChild.offsetHeight;
42 //        var twoH = two.clientHeight;
43 //        console.log(oneH, twoH);
44     </script>
45 </html>

未设定图片高度之前(原图片高度为750)

打印结果:

谷歌: 火狐:

谷歌为one:752, two: 100, 火狐为: 754, 100. 对的, 怎么会这样? 怎么会有误差. 这个是因为图片在父元素中默认垂直对齐方式是以基线对齐的, 把图片对齐方式设置为vertical-align: bottom就OK了, 这时, 再打印两个高度都为750, 同样也不会出现小数啦!!