js常用属性及方法总结(温习下旧知识)

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <div class="box" qwe="张展亮" style="background:#000">
        asdfsdf
    </div>
</body>
<script type="text/javascript"> //获取指定对象的样式属性getStyle (只读) var getStyle = function( obj , attr ){ return obj.currentStyle?obj.currentStyle[attr]:getComputedStyle(obj)[attr]; }; //用正则写getClass(只读) var getClass = function(cName,obj){ obj = obj||document; if (obj.getElementsByClassName) { return obj.getElementsByClassName(cName); } else { var arr = []; var tagName = obj.getElementsByTagName('*'); var reg = new RegExp("\\b"+cName+"\\b"); for (var i = 0; i < tagName.length; i++) { if (reg.test(tagName[i].class)) { arr.push(tagName[i]); } } return arr; } } //node.nodeType 判断节点类型 //childNodes 获取元素的所有子节点 有兼容问题 //children 获取元素所有的孩子元素节点 没有兼容问题 //firstChild 获取元素的第一个节点 有兼容问题 //firstElementChild 获取元素的第一个元素节点 没有兼容问题 //lastChild 获取元素的第一个节点 有兼容问题 //lastElementChild 获取元素的最后一个元素节点 有兼容问题 //nextSibing 获取元素的下一个兄弟节点 有兼容问题 //nextElementSibing 获取元素的下一个元素节点 有兼容问题 //previousSibing 获取元素的上一个节点 有兼容问题 //previousElementSibing 获取元素的上一个元素节点 //parentNode 获取元素的父节点 不存在兼容问题 //offsetParent 获取元素的最近定位父级 不存在兼容问题  //offsetLeft 获取元素离他最近定位父级的left值 不存在兼容问题(只可读) //offsetTop 获取元素离他最近定位父级的top值 不存在兼容问题(只可读) //offsetWidth 获取元素的绝对宽度(边框+内边距+宽度) 不同浏览器有1px误差 推荐使用 //offsetHeight 获取元素的绝对高度(边框+内边距+高度) 不同浏览器有1px误差 //clientWidth 获取元素的绝对宽度(内边距+宽度) 没有误差 //clientHeight 获取元素的绝对高度(内边距+高度) 没有误差 //scrollWidth 获取元素的绝对宽度(内边距+宽度) 没有误差,但如果有溢出则不同浏览器会有20px误差 不推荐使用 //scrollHeight 获取元素的绝对高度(内边距+高度) 没有误差,但如果有溢出则不同浏览器会有20px误差 不推荐使用 //getAttribute("属性") 获取元素的任意属性(这个方法比较强硬) //setAttribute("属性","值") 向元素添加任意属性(这个方法比较强硬) //removeAttribute("属性") 移除元素中的某个属性 //obj.currentStyle["属性"] 获取元素最终的style 只可读 只支持ie //getComputedStyle(obj).["属性"] 获取元素最终的style 只可读 支持非ie /* var getStyle = function(obj,attr){ return obj.currentStyle?obj.currentStyle[attr]:getComputed(obj)[attr]; } */ //表单部分单选和多选按钮,选中是true,不选中是false //document.body.scrollTop 获取当前滚动高度(只兼容谷歌) //document.documentElement.scrollTop 获取当前滚动高度(只兼容非谷歌) /* var scrollTop = document.body.scrollTop||document.documentElement.scrollTop; 注意:如果要设置滚动高度两个都要设置 */ //pageX/Y 获取触点距离body左上角的距离 会随着页面滚动而变化 除ie8-不兼容外,其他都兼容 var oBox = document.getElementsByClassName("box")[0]; oBox.removeAttribute("class"); console.log(oBox.getAttribute("qwe")); console.log(oBox.setAttribute("style","width:500px;height:500px;background:red")); </script>
</html> 

你可能感兴趣的:(JavaScript)