常用的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;

• 文本域只读,不能更改文本域内的内容

1. <textarea name="tt" id="txt" cols="30" rows="10" readonly="readonly">哈哈哈哈哈哈，哈哈哈哈哈哈哈哈，哈哈哈哈哈哈哈哈哈哈</textarea>

• 按钮禁用

1.<input type="button" value="请仔细阅读协议(5)" id="btn" disabled="disabled"/>