一、HTML中元素属性
1.offsetLeft ：返回当前元素左边界到它上级元素的左边界的距离，只读属性；
注意： 获取的是（ left 值 + 本身margin的值）
2.offsetTop 返回当前元素上边界到它上级元素的上边界的距离，只读属性 ；
获取的是 （top值 + 本身margin的值）
3.offsetHeight 返回元素的高度
注意：元素的高度 = 本身高度Height + padding值*2 + border值*2
4.offsetWidth 返回元素的宽度
注意：元素的宽度 = 本身宽度Width + padding值*2 + border值*2
5.offsetParent 返回元素的偏移容器，即对最近的动态定位的包含元素的引用
有position的话就找到他的父级定位,返回他的父级,如果没有就返回body,以浏览器窗口为定位,
当元素是固定定位fixed 时，element.offsetParent 返回值是null;
6.clientWidth 返回元素的可见宽度 属性本身的宽度+padding,与 offsetWidth区别在于clientWidth 不包含border值
7.clientHeight 返回元素的可见高度 属性本身的高度+padding,与offsetHeight区别在于clientHeight不包含border值
<script>//offsetLeft 返回当前元素左边界到它上级元素的左边界的距离，是只读属性var osl = document.querySelector(".son");console.log(osl.offsetLeft); //-->155px= left:150px + .son.margin:5px//offsetTop返回当前元素上边界到它上级元素的上边界的距离，只读属性console.log(osl.offsetTop); //-->105px = top:100px + .son.margin:5px//offsetWidth 返回元素的宽度 = width + border + padding (注意：不包括margin)console.log(osl.offsetWidth); //-->210px = width:200px + (padding:3px)*2 + (border:2px)*2//offsetParent返回元素的偏移容器，即对最近的动态定位的包含元素的引用//当子盒子是固定定位时，返回null因为子盒子不相对偏移console.log(osl.offsetParent); //返回父盒子 .father//clientWidth返回元素的可见宽度(不包括border 和 margin)console.log(osl.clientWidth); //--->206px = width:200px + (padding:3px)*2//clientHeight返回元素的可见高度</script>
二、滚动条属性
1.scrollTop 返回匹配元素的滚动条的垂直位置
2.scrollLeft 返回匹配元素的滚动条的水平位置
元素属性应用
标准浏览器(谷歌 / IE9以上浏览器)语法：
document.documentElement.scrollTop;
document.documentElement.scrollLeft;
低版本IE浏览器使用语法：
document.body.scrollTop;
document.body.scrollLeft;
兼容写法如下：
var topSize=document.documentElement.scrollTop || document.body.scrollTop;
3.滚动事件： window.onscroll = function () {};
<script>var son = document.querySelector(".son");var father = document.querySelector(".father");//注意：window.getComputedStyle(son, null).top 返回的是xxpx字符串类型//用parseInt()转换为数字型var topSize = parseInt(window.getComputedStyle(son, null).top);var leftSize = parseInt(window.getComputedStyle(son, null).left);console.log(topSize);window.onscroll = function () {var topScorll1 = document.documentElement.scrollTop;var leftScorll1 = document.documentElement.scrollLeft;son.style.top = topSize + topScorll1 + "px";son.style.left = leftSize + leftScorll1 + "px";console.log(topScorll1);}</script>
三、类名样式操作方法
第一种:className类名样式操作
可以修改元素的样式,适合样式较多的元素类名属性,会覆盖以前的类名
如果想保留两个类名,就直接写两个类名
第一种:classList.add()追加样式,这种方法就解决了单独加样式会覆盖的问题,推荐使用
classList.remove()删除样式
classList.replace()替换样式,两个值,第一个是找到已存在要替换的样式,第二个是替换的样式
<style>.p {width: 200px;height: 200px;background: #ccc;border: 2px solid red;border-radius: 3px;font-size: 18px;color: red}.col {background-color: pink;font-size: 25px;font-weight: 700;}.bh {color: green;}</style></head><body><!-- 修改/添加类名的方式 --><div class="p" style="color: pink;">123</div><script>var div = document.querySelector("div");// //1.修改className 需要添加类名，不可覆盖// div.className = "p col"//2.追加类名的方式；.classList.add("类名")div.classList.add("p");div.classList.add("col");div.classList.add("bh");div.classList.remove("bh");// console.log(div.classList);//获取样式//1.使用行内样式的时候console.log(div.style.color); //--->pink//2.使用内部样式，或者外部样式时 采用 getComputedStyle(元素, null)."需要获取的样式属性"// var cols = document.defaultView.getComputedStyle(div, null).color;// console.log(cols);//或者直接调用var col = getComputedStyle(div, null).color;console.log(col);//兼容性问题,ie8以下不兼容 getComputedStyle(元素, null)方法//ie8 以下使用 元素.currentStyle属性</script></body>
四、鼠标事件
1.onclick 当用户单击某个对象时调用事件
2.onmouseover 鼠标移到某元素之上
3.onmouseout 鼠标从某元素移开
4.onmousedown 鼠标按钮被
5.onmouseup 鼠标按钮抬起事件
<body><div onmouseover="over()" onmouseout="out()">123</div><script>var div = document.querySelector("div");//鼠标经事件div.onmouseover = function () {div.style.background = "pink";}div.onmouseout = function () {div.style.background = "green";}div.onmousedown = function () {div.innerHTML = "你开始点我啦"}div.onmouseup = function () {div.innerHTML = "你点完啦"}//也可以在行内写事件调用函数；function over() {div.style.background = "pink";}</script></body>
