欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

JS(JavaScript)的进一步了解6(更新中···)

程序员文章站 2022-06-24 15:30:00
元素的属性 div.attributes 是所有标签属性构成的数据集合 div.classList 是所有class名构成的数组集合 在classList的原型链上看以看到add()和remove() 1.client系列 (1) clientWidth/clientHeight 是我们设置的宽和高 ......

元素的属性

JS(JavaScript)的进一步了解6(更新中···)

JS(JavaScript)的进一步了解6(更新中···)

div.attributes 是所有标签属性构成的数据集合

div.classlist 是所有class名构成的数组集合

  在classlist的原型链上看以看到add()remove()

 

  1.client系列

   (1) JS(JavaScript)的进一步了解6(更新中···)

 

  clientwidth/clientheight 是我们设置的宽和高加上内边距(没有边框)

  clientleft/clienttop 就是我们设置的边框值

 

  2.offset系列

  JS(JavaScript)的进一步了解6(更新中···)

  offsetwidth/offsetheight 是我们设置的宽和高加上边框加上内边距

  offsetleft/offsettop 是元素外边距离父级的内边距的距离

  这个父级由定位position:absolute;

  offsettop 参照物由父级元素身上的position:absolute/fixed决定的;如果父级元素

没有就逐层向上查找直到body

 

  offsetparent  返回这个元素的父级元素

  3.scroll系列

  JS(JavaScript)的进一步了解6(更新中···)

  scrollwidth/scrollheight 就是我们设置的宽高加上内边距(内容没有溢出的前提下)

  如果超出了范围就按内容而定

  scrolltop/scrollleft   滚动条卷走的高度和宽度

 

  如果我们设置了小数,都会向上取整

案例分析

offset 往往和我们做元素的运动有关

  1. offset必须和position配合使用往往这个值还必须是absolute
  2. offsetleft 有初始值 在标准浏览器下是8px  低版本没有。
  3.    JS(JavaScript)的进一步了解6(更新中···)  

document.body 获取的是文档中的body标签

document.documentelement  获取的是文档中根节点

document.body.clientwidth

document.documentelement.clientwidth

JS(JavaScript)的进一步了解6(更新中···)JS(JavaScript)的进一步了解6(更新中···)

二者获取的width的值不一样差16px,怎样让他们一样。

JS(JavaScript)的进一步了解6(更新中···)一个css就搞定了

 

 

ie6不支持document.documentelement,

 

兼容性写法

 

var w=document.documentelement.clientwidth||document.body.clientwidth

 

获取浏览器可见区的宽度

 

复习:

逻辑运算 ||  &&  

 

|| 遇到第一个为真就返回

&& 遇到第一个为假就终止,返回false,如果没遇到就返回最后那一个

5&&4&&2&&1  ==1

5&&0&&3&&0  ==>0

5||2&&3  且的优先级高于或  2&&3=3   5||3 ==5