一。HTML
<ul>
<li>1111111</li>
<li>22222222</li>
</ul>
二。CSS
li{
height: 60px;
line-height: 60px;
text-align: center;
font-size: 14px;
color: red;
padding: 4px;
border: 1px solid black;
}
1.获取宽高：
jq：$("div").height()；
js:document.getElementsByTagName("ul")[0].getElementsByTagName("li")[0].offsetHeight；
mui:获取第一个li高度就是mui("ul li")[0].offsetHeight；第二个li就是mui("ul li")[1].offsetHeight；
备注：来看看height，scrollHeight，offsetHeight，clientHeight这几个的区别与联系：
clientHeight：理解为内容可视区域的高度，不包含border，不包含border，不包含border；padding是算在里面的。就是clientHeight=height(设置的高度) + padding - 横向滚动条的高度；
offsetHeight：offsetHeight = clientHeight + border + 横向滚动条（横向，横向，就是overflow-x:scroll出现的那个滚动条的高度，默认应该都是17px）；
scrollHeight: 经过测试，我得出：scrollHeight=clientHeight+滚动条滚动的距离(高度就是竖直滚动条滚动的距离，宽度就是横向滚动条滚动的距离)；
注意了，注意了：在mui里面，在mui里面，在mui里面，clientHeight，offsetHeight的滚动条是不算高度的，也就是offsetHeight = clientHeight + border。clientHeight=height-border；辣么在mui里面上面的li：offsetHeight=height，clientHeight就是58px；
总结：1.pc端：clientHeight=height(设置的高度) + padding - 横向滚动条的高度，如果没有滚动条就不减；offsetHeight = clientHeight + border + 横向滚动条，如果没有滚动条就不加；
2.移动端：2.1 有mui.css：offsetHeight = clientHeight + border。clientHeight=height-border；滚动条不算宽高。 （火狐浏览器里调试一定要设置成响应式设计模式哦，不然得出的高度会让你怀疑人生的）
2.2 无mui.css，只有<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />；
有无滚动条都是：clientHeight=height(设置的高度) + padding；offsetHeight=clientHeight+border；
低版本浏览器没测试过，不知道是否是一样的。
高度明白了，宽度就是一样的道理。。。
还有：js操作dom元素什么时候加[0]。document.getElementById("")这种，因为id在页面中是唯一的一个所以，通过id来寻找的是不用加[0]的，但是document.getElementsByTagName或者document.getElementsByClassName("")这种，页面上可能含有多个，是个数组，所以需要用[ 0 ]，相当于索引一样来获取。mui类似。
jQuery有时候也会有加[0]的时候，比如$("div")[0].innerHtml = "111"，是因为innerHtml是一个DOM对象的属性，需要把jQuery对象转换成DOM对象才能使用innerHtml属性，不然会报错。其实jQuery也有自己的innerHtml方法，就是$("div").html(“111”);
js,mui,jq 操作基本的DOM
原文地址：http://www.cnblogs.com/zjjDaily/p/7930153.html