js,mui,jq 操作基本的DOM

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

2.添加和删除Class属性(mui的添加和删除感觉和原生的一样)

　　jq: 添加：$("ul li:nth-child(1) p").addClass("active");

　　 　删除：$("ul li").eq(0).find("p").removeClass("active");

　　js: 添加：document.getElementsByTagName("ul")[0].getElementsByTagName("li")[0].classList.add("active")

　　　　      删除：document.getElementsByTagName("ul")[0].getElementsByTagName("li")[0].classList.remove("active")

　　mui: 添加：mui("ul li")[1].classList.add("active")

　　　　 删除：mui("ul li")[1].classList.remove("active")

3.CSS属性的设置和获取：

　　jq：设置：$("ul li").css("background","red");

　　　　获取：$("ul li").css("background");

　　js:　设置：js设置css样式有以下几种方式：element是获取到的DOM对象

　　　　　　　　1.element.style.width="100px"  //style对象下面的属性介绍http://www.w3school.com.cn/jsref/dom_obj_style.asp

　　　　　　　　2.element.style.cssText="width:100px;height:100px";//一次可以设置多个属性

　　　　　　　　3.element.setAttribute('style', 'height: 100px');

　　　　　　　　4.element.style.setProperty("background","red");

　　　　获取：1.element.style.backgroundColor //只能获取内联样式 ，但是backgroundColor非内联也可获取。注：如果是background-color这种，需要写成驼峰样式即backgroundColor。
　　　　　　　　2.element.currentStyle.height //IE浏览器获取非内嵌样式

　　　　　　　　3.在非IE浏览器：window.getComputedStyle(element，null/伪类).height；如果是element本身，那么第二个参数就是null，如果需要伪类的样式，则第二个参数为伪类。document.defaultView.getComputedStyle（element,null/伪类）一样的。

　　　　　备注：做兼容：var a=element.currentStyle ? element.currentStyle : window.getComputedStyle(element, null)。看是否支持currentStyle,也就是看是否处在ie浏览器下。

　　mui：

其它的请看我的这篇详细文章