窗口属性 和DOM 元素尺寸位置 及习题加强

可视窗口大小;window.innerWidth;/innerHeight

窗口滚动条距离
window.pageXOffset;pageYoggset

dom(元素).offsetWidth//求可视元素的宽高;
dom.offsetHeigth//
dom.offsetLeft//返回相对于第一个有定位的父级的距离
dom.offsetTop//

window.scroll()/scrollTo()  //跳动到传入数值的地方;
scrollBy()   //在之前的基础做累加;

小说阅读器

<div style="width:100px;height:100px;background-color:orange;
color:green;font-size:40px;line-height:100px;text-align:center;position: fixed;bottom:200px;right:50px;
border-radius:50%; opacity: 0.5;">开始</div>
<div style="width:100px;height:100px;background-color:red;
color:#fff;font-size:20px;text-align:center;position: fixed;bottom:100px;right:50px;
border-radius:50%; opacity: 0.5;">暂停</div>
<script type="text/javascript">

var star =document.getElementsByTagName(‘div‘)[1];
var stop=document.getElementsByTagName(‘div‘)[2];
var timer=0;
var kay=true;
star.onclick=function(){
    if(kay){
    timer=setInterval(function(){
        window.scrollBy(0,10)

    },100);
    kay=flase;
    }
}
stop.onclick=function()
{
    clearInterval(timer);
    kay=true;

}
</script>

原文地址:https://www.cnblogs.com/zhangjiaqi123/p/10475942.html

时间: 2024-10-10 09:50:20

窗口属性 和DOM 元素尺寸位置 及习题加强的相关文章

点击事件然后页面跳转到指定DOM元素的位置

设置一个函数,执行函数滚动条自动拖动,页面跳转到指定DOM元素的位置. 实现方式很简单,首先引入animatescroll.js文件(要先引入JQuery),然后 $('#id').animatescroll(); 即可调到指定DOM元素在页面的位置. 为方便可以编写一个函数,传入DOM元素的ID function jumpTo(id){ $("#"+id).animatescroll(); } 附animatescroll.js /* 使用方法: $("#id")

DOM元素尺寸和位置

一.获取元素 CSS大小 1.通过style 内联获取元素的大小 var box = document.getElementById('box'); //获取元素 box.style.width; //200px.空 box.style.height; //200px.空 style 获取只能获取到行内style 属性的CSS 样式中的宽和高,如果有获取:如果没有则返回空. 2.通过计算获取元素的大小 var style = window.getComputedStyle ? window.ge

JS-学习-DOM元素尺寸和位置

一,获取元素的css大小 1.通过style内联获取元素的大小 var box = document.getElementById('box');    // 获得元素;     box.style.width;                             // 200px;     box.style.height; 2.通过计算获取元素的大小 var style = window.getComputedStyle ? window.getComputedStyle(box,nul

JS-DOM ~ 03. 子节点的操作、style.样式和属性、dom元素的创建方法及操作、14个例题、主要是利用js直接控制html属性

带有Element和不带的区别 a)  带Element的获取的是元素节点 b)  不带可能获取文本节点和属性节点 获取所以子节点 a)   . childNodes b)   . children c)   . parentNode . children [索引] . children:获取所有子节点 opacity:0-1:透明度 alpha(opacity:百分数):IE6/7/8透明度 先绑定事件再进行循环 previousNode()上一个兄弟节点 alert(变量名)可测试变量名是否

DOM元素尺寸和位置(clientwidth ,scrollwidth , offsetwidth.......)

[1] slientWidth 和 sclientHeight slientWidth:获取的是可视宽度 slientHeight:获取的是可视高度 <html> <head> <style> .div1{ width:50px; height:50px; overflow:scroll; //设置滚动条 } </style> </head> <body> <div id="div" class="

DOM元素尺寸与位置

// clientWidth, clientHeight 1. 增加边框.外边距,DOM实际大小不受影响 2. 增加滚动条,会减少DOM实际大小,原因不把滚动条的大小算在内 3. 增加内间距,会影响DOM实际大小 4. 在没有内边距和滚动条的情况下,没有设置CSS大小,那么IE浏览器会理解为0 // scrollWidth, scrollHeight 1. 增加边框,浏览器之间有兼容问题 2. 增加外间距,DOM实际大小不受影响 3. 增加滚动条,会减少DOM实际大小,原因不把滚动条的大小算在内

selenium怎么滚动到窗口中的指定元素的位置

1.一个窗口中有些元素并不能在展示的页面中看到,需要滚动条滚动后才能显示出来, 这样selenium是不能直接定位到该元素的. 两种解决方法: 一:使用js执行 JavascriptExecutor js; Actions actions; js =(JavascriptExecutor) driver; js.executeScript("arguments[0].scrollIntoView();", coursePage.getViewDetails().get(0)); 这种方

table表格用tbody新属性获取DOM元素

// alert(oTab.getElementsByTagName("tbody")[0] // .getElementsByTagName('tr')[1] // .getElementsByTagName('td')[2].innerHTML); // 可以简写成下面样子: alert(oTab.tBodies[0] .rows[1] .cells[2].innerHTML); 原文地址:https://www.cnblogs.com/apollo1616/p/9813458.h

JS中获取 DOM 元素的绝对位置实例详解

在操作页面滚动和动画时经常会获取 DOM 元素的绝对位置,例如 本文 左侧的悬浮导航,当页面滚动到它以前会正常地渲染到文档流中,当页面滚动超过了它的位置,就会始终悬浮在左侧. 本文会详述各种获取 DOM 元素绝对位置 的方法以及对应的兼容性.关于如何获取 DOM 元素高度和滚动高度,请参考视口的宽高与滚动高度 一文. 概述 这些是本文涉及的 API 对应的文档和标准,供查阅: API 用途 文档 标准 offsetTop 相对定位容器的位置 MDN CSSOM View Module clien