js,mui,jq 操作基本的DOM

Posted 2020-10-16 努力┗(｀O′)┛奋斗！

一。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”);