常用的web方法 web API(二)
在上一篇《常用的web方法 web API(一)》中我们学习了：绑定事件的几种方式、解绑事件的几种方式、创建元素的几种方式、获取节点的几种方式本篇我们将继续学习：轮播图的js方法、offset系列相关属性、scroll系列属性、client系列以及获取元素计算后的样式属性值。好了，接下来我们接着学习：
五、轮播图
1.轮播图--无缝连接图
//把ul中第一个li复制一个,追加到ul中所有的li的最后
ulObj.appendChild(ulObj.children[0].cloneNode(true));
六、offset系列相关属性
注：
当一个js文件中的元素想要获取style中的属性，不能获取，因为style可以单独放在一个外部文件中，Js元素是无法从一个外部文件中获取属性的：
此时，只能用以下方式获取；
1.console.log(my$("dv1").offsetWidth);
获取元素的宽度，包含边框，padding的值
2.console.log(my$("dv1").offsetHeight);
获取元素的高度(有边框)
3.console.log(my$("dv1").offsetLeft);
获取的是元素距离左边位置的值(子元素脱标,父级元素没有脱标,父级元素 的margin和padding和border这些和子级元素的left没有关系)
如果父元素和子元素都没有脱离文档流的情况下:
offsetLeft:父级元素的margin+父级元素的padding+父级元素的border+子 级元素的margin
4.console.log(my$("dv1").offsetTop);（没有脱离文档流）
父级元素的margin+父级元素的padding+父级元素的border+子级元素的margin
5.offsetParent---当前元素的父级元素
七、scroll系列(scroll系列中的值都是数字类型)
1.scrollHeight:元素内容实际的高度,没有边框,如果内容不能撑起高度,就是元素的高度
2.scrollWidth:元素内容实际的宽度,没有边框,如果内容不能撑起宽度,就是元素的宽度
3.scrollTop:元素内容向上卷曲出去的距离
4.scrollLeft:元素内容向左卷曲出去的距离
//给window注册onscroll事件
window.onscroll=function(){};
- 三大系列:--------
1.offset系列
offsetLeft:获取的是元素距离左边的位置(父级元素margin,父级的padding, 父级元素border,自身的margin----父级和子级元素没有脱标)
offsetTop:获取的是元素里上面的位置
offsetWidth:获取元素的宽度,有边框
offsetHeight:获取元素的高度,有边框
2.scroll系列
scrollLeft:向左卷曲出去的距离
scrollTop:向上卷曲出去的距离
scrollWidth:元素中内容的实际宽度
scrollHeight:元素中内容的实际高度
3.client系列
clientLeft:元素的左边框的宽度
clientTop:元素的上边框的宽度
clientWidth:元素的可视区宽度,没有边框的
clientHeight:元素的可视区高度,没有边框的
clientX:可视区域的横坐标
clientY:可视区域的纵坐标
八、获取元素计算后的样式属性的值
window.getComputedStyle(my$("dv"),null).left
my$("btn").onclick=function(){
console.log(getStyle(my$("dv")),"left");
console.log(getStyle(my$("dv")),"top");
console.log(getStyle(my$("dv")),"width");
console.log(getStyle(my$("dv")),"height");
};
//获取元素计算后的样式属性的值
function getStyle(element,attr){
//谷歌和火狐支持前一个，IE8支持后一个
return window.getComputedStyle?window.getComputedStyle(element,null)[attr]:element.currentStyle[attr]||0;
}
图片透明度：0--1
空地址：javascript:void(0)
<li><a href="javascript:void(0)">播客</a></li>
<!--<li><a href="#">播客</a></li>-->
<li><a href="javascript:void(0)">博客</a></li>
阻止页面跳转：
return false;
禁用文本框：
txtObj.disabled=true;
- 文本域只读,不能更改文本域内的内容
- <textarea name="tt" id="txt" cols="30" rows="10" readonly="readonly">哈哈哈哈哈哈，哈哈哈哈哈哈哈哈，哈哈哈哈哈哈哈哈哈哈</textarea>
- 按钮禁用
1.<input type="button" value="请仔细阅读协议(5)" id="btn" disabled="disabled"/>