常用的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"/>

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

扫码关注云+社区

领取腾讯云代金券