window属性和方法和修改滚动条样式

亦凉 2023-06-19 09:54 2阅读 0赞

**1.文档加载事件**  
window.onload():当文档内容完全加载完成才会触发事件（css,html,js,图像，音频）只能写一次  
DOMContentLoaded():等 除外部文件（图像，音频，视频）加载完成就会出发（可写多次）  
**2.文档显示区的宽度和高度：**  
window.innerHetght//宽度  
window.innerHeight //高度  
**3滚动条的偏移量，可以设置，但不能控制**  
pageXOffset //x轴  
pageYOffaet //y轴  
4获取页面滚动过的高度

var topValue = document.body.scrollTop || document.documentElment.scrollTop;

**网页的前进后退**  
window.open(url,name,网页信息)  
window.close() 注意：有些浏览器不允许关闭自身  
设计好的name属性  
\_self:自动获取当前窗口的name  
\_blank：不让浏览器的name为空，随机生成一个name  
alert():带一个确认按钮的警告框  
confirm()：带有指定信息确认和取消的对话框  
prompt:显示可提示输入的对话框

//替换当前窗口，可后退
    <a href="http:" target="_self"></a>
    <a href="javascript:open('http:','_self')" ></a>
    //替换当前窗口，不可后退
    <a href="javascript:location.replace('http:')"></a>
    //新的窗口打开，可打开多个
    <a href="http:" target="_blank"></a>
    <a href="javascript:open('http:','_blank')" ></a>
    //新的窗口打开，只能打一个
    <a href="http:" target="zidingyi"></a>
    <a href="javascript:open('http:','zidingyi')" ></a>

**滚动条的样式修改**  
/\*::-webkit-scrollbar 滚动条整体部分

::-webkit-scrollbar-thumb{ 
    		background: green;
    		border-radius: 3px;
    		background-color: rgba(0,0,0,0.2);
    	}
    	::-webkit-scrollbar-track{ 
    		background: pink;
    	}

::-webkit-scrollbar-thumb 滚动条里面的小方块，能向上向下移动（或向左向右移动）

::-webkit-scrollbar-track 滚动条的轨道（里面装有Thumb）

::-webkit-scrollbar-button 滚动条的轨道的两端按钮，由于通过点击微调小方块的位置。

::-webkit-scrollbar-track-piece 内层轨道，滚动条中间部分

::-webkit-scrollbar-corner 边角，即垂直滚动条和水平滚动条相交的地方

::-webkit-resizer 两个滚动条的交汇处上用于拖动调整元素大小的小控件\*/