一。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

　　總結：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