Tracy JS 小笔记 - JS 库收藏/ 脚本化 CSS

最新推荐文章于 2022-08-31 23:01:27 发布

小小程序员——Tracy

最新推荐文章于 2022-08-31 23:01:27 发布

阅读量104

点赞数

分类专栏： js

本文链接：https://blog.csdn.net/weixin_48702807/article/details/117437602

版权

js 专栏收录该内容

27 篇文章 0 订阅

订阅专栏

滚动条滚动距离

window.pageXOffset/ window.pageYOffset
求滚动条滚动的像素 IE8 以及 IE8 以下不兼容
document.body.scrollLeft/document.body.scrollTop
document.documentElement.scrollLeft/document.documentElement.scrollTop
IE8 和 IE8 以下兼容性混乱，一组好用，另外一组的值一定为零

因此兼容所有 IE8 和 IE8 以下浏览器的方法是相加
document.body.scrollLeft + document.documentElement.scrollLeft == window.pageXOffset;
document.body.scrollTop + document.documentElement.scrollTop == window.pageYOffset;

封装所有浏览器兼容的，滚动条位置的方法
function getScrollOffset(){
    if(window.pageXOffset){ //如果是 IE8 以上的浏览器
        return { //返回一个对象
            x: window.pageXOffset,
            y: window.pageYOffset
        }
    }else{ //IE8 和 IE8 以下浏览器
        return {
            x: document.body.scrollLeft + document.documentElement.scrollLeft,
            y: document.body.scrollTop + document.documentElement.scrollTop
        }
    }
}

让滚动条滚动

window 上有三个方法： scroll(), scrollTo(), scrollBy();
三个方法功能类似：用法都是将 x,y 坐标传入。实现让滚动条滚动到当前位置。
区别： scrollBy() 会在之前的数据基础之上累加
实际应用，展示"更多按钮"点击之后页面加长，点击"收起" 之后，页面回到点击 "更多按钮" 的那个位置，提高用户体验
var currentposition;
查看更多单击事件 currentposition = getScrollOffset()//之前封装好的函数
收起单击事件 scrollTo(currentposition.x, currentposition.y);

Demo,自动阅读
小说的右下角有一个点击翻页
var timer = 0;
var key = true;
start.onclick = function(){
    if(key){//防止重复点击,加锁
        timer = setInterval(function(){
        window.scrollBy(0, 10);
        },100);
        key = false;
    }
}

暂停.onclick = function(){
    clearInterval(timer);
    key = true;//开锁
}

查看可视区窗口的尺寸

我们能看到的 html 页面的，可显示的尺寸(像素)
window.innerWidth/window.innerHeight IE8 & IE8 以下不兼容
document.documentElement.clientWidth/clientHeight 标准模式下任意浏览器都兼容
document.body.clientWidth/clientHeight 怪异模式下，任意浏览器都兼容
html 开头带 !DOCTYPE 标签的就是标准模式，不带的就是怪异模式
- 标准模式: 当前页面就用浏览器最新的方法渲染浏览器
- 怪异模式：当前页面只符合 IE6 的语法，但是经过了好几年 IE7 诞生了，用户拿 IE7 访问网站但是依然用 IE6 的语法来渲染页面。也就是让浏览器向后兼容，兼容之前的语法规则。
- document.compatMode; 值为 "CSS1Compat" 说明是标准模式
  document.compatMode; 值为 "BackCompat" 怪异模式，向后兼容

封装兼容性方法，返回浏览器可视窗口的尺寸
function getViewportOffset(){
    if(window.innerWidth){ //IE8 以上浏览器
        return { //返回一个对象
            width: window.innerWidth,
            height: window.innerHeight
        };
    }else{ //IE8 以下浏览器
        if (document.compatMode === "CSS1Compat"){//标准模式
            return { 
                width: document.documentElement.clientWidth,
                height: document.documentElement.clientHeight
            };
        }else{//怪异模式
            return { 
                width: document.body.clientWidth,
                height: document.body.clientHeight
            };
        }
    }  
}

查看元素的几何尺寸

element.getBoundingClientRect(); 兼容性很好，任何 DOM 元素都能调用，但是这个方法我们知道就行了，从来不用
改方法返回一个对象，对象包括了元素的宽高和它的位置; 左上角坐标 (left, top), 右下角坐标(right, bottom)
height 和 width 老版本 IE 并没有实现
返回的结果并不是"实时的", 之后元素被改了，值也不变,也就是一个副本
element.offsetWidth/offsetHeight
查看元素的尺寸, 它们求的是，视觉上的尺寸。比如说一个 div 宽度是 100px, padding 是 100px; 那么这个div.offsetWidth = 300px; div.style.width = 100px;
这个值和上面的 getBoundingClient 的 height,width 是一样的，所以说就给取代了
element.offsetLeft/offsetTop
查看元素位置，但是它求的不是相对于页面的位置，它求的是相对了(设置了定位 position 的)父元素的位置
如果它的父级元素们都没有设置定位，那么他的值就是相对于最外层边框的。
既: 对于无父级定位的元素，返回相对文档的坐标。对于有父级定位的元素，返回相对与最近的有定位的父级元素的坐标。
element.offsetPartent : 返回最近的有定位的父级，如无 (position没设置或者设置的是默认值：static),返回 body.
body.offsetPartent = null

求任意元素，相对于文档的坐标。
Element.prototype.getElementPosition = function(){
    
}

脚本化 CSS

js 操作 css

读写操作
- dom.style.prop 或者 dom.style['prop']
  div.style.width = "200px";
  div.style.backgroundColor = "red"; //小驼峰，不能有中划线 background-color
  属性的值一定是字符串形式
- 复合属性尽量拆解
  div.style.border = "1px solid red;"
  尽量写成 fiv.style.borderWidth = "1px";
- 可读写行间样式,没有兼容问题. 在 css 里设置的 width 是读不出来的，只能读写“行间”样式
- 如果碰到了保留字的属性，那么属性名前尽量加css. eg:div.style.cssFloat
只读操作
- IE8 以及 IE8 以下不兼容
  - 查询计算机样式
  - window.getComputedStyle(ele, null).prop;
    window.getComputedStyle(myDiv, null).width;
  - 计算机样式，只能读取. 它获取的当前元素所展示的一切 css 的显示值。不像 div.style 值显示行间属性
  - 返回的计算样式的值都是最后的绝对值，没有相对单位
    比如 em 它就是一个相对值，我们会得到绝对的 px; 颜色 red 我们会得到 rgb(255, 0, 0);
  - 这里的参数 null :这里是获取元素的"伪元素" 的样式表 ::before, ::after 那种
    window.getComputeStyle(mydiv, "after").width;
  - ```
  点击 div 之后，改变 div 伪元素的样式
  实际应用就是 show/hide 箭头改变方向的功能 
  .green::after{
      content:"";//伪元素必须有content
      display:inline-block;
      background-color: green;
      ...
  }
  
  .yellow::after{
      content:"";//伪元素必须有content
      display:inline-block;
      background-color: yellow;
      ...
  }
  
  <div class="green"><div>
  var div = document.getElementsByTagName("div")[0];
  div.onclick = function(){
      div.className = div.className == "green" ?= "yellow":"green";
  }
                                         
```
- IE8 以下兼容的是
  - dom.currentStyle.prop / dom.currentStyle['prop']
  - 它返回的值不是绝对值，你写什么就获取到什么。如 em, red
  - 它是IE 浏览器独有的属性
  - 它获取的当前元素所展示的一切 css 的显示值。不像 div.style 值显示行间属性

封装兼容性方法,获取元素展示值 getStyle(prop)
Element.prototype.getStyle = function(prop){
    if(window.getComputedStyle){
        return window.getComputedStyle(this, null)[prop];
    }else{
        return this.currentStyle[prop];
    }
}

<div class="green" style="left:0px;"><div> //这里定义一下 left, 因为默认值是 auto;
加速向右运动
var speed = 2;
让 div 自动移动 定时器里写
speed += speed/7;
div.style.left = parseInt(div.getStyle('left')) + "speed" + "px";
if (parseInt(div.style.left) > 500) clearInterval(timer);