首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

js获取页面宽

网页可见区域宽:document.body.clientWidth 网页可见区域:document.body.clientHeight 网页可见区域宽:document.body.offsetWidth...(包括边线宽) 网页可见区域:document.body.offsetHeight(包括边线宽) 网页正文全文宽:document.body.scrollWidth 网页正文全文:document.body.scrollHeight...网页被卷去:document.body.scrollTop(IE7无效) 网页被卷去左:document.body.scrollLeft(IE7无效) 网页被卷去:document.documentElement.scrollTop...屏幕分辨率:window.screen.height 屏幕分辨率宽:window.screen.width 屏幕可用工作区高度:window.screen.availHeight 屏幕可用工作区宽度...:window.screen.availWidth 相对于窗口左上角X:window.event.clientX 相对于窗口左上角Y:window.event.clientY 相对于整个页面的X:window.event.X

7.6K40
您找到你想要的搜索结果了吗?
是的
没有找到

JS获取图片原始宽

,很繁琐 获取图片大小: 1.使用innerWidth,innerHeight 使用HTMLImageElement.innerWidth 是可以拿到图片宽度 但是需要注意是这里拿到宽度是图像在CSS...像素中渲染宽度 也就是说如果图片原始大小1200,使用css或者width属性设置为600,那么这里拿到宽度为600,显然用innerWidth获取图片原始尺寸是不靠谱 2.使用document.createElement...(“img”) var img = document.createElement("img") img.src = "1.jpg" var width = img.width 动态创建一个imgElement...,通过给src赋值,最终来获取img宽和 需要注意是在给imgsrc赋值时,这是一个异步过程,会存在获取img宽度时值为0(图片还未加载完成),可以在给img赋值之前加上onload事件 var...img = document.createElement("img") img.onload = function () { var width = img.width } img.src =

6.1K20

js获取各种距离和宽

浏览器滚动掉Y距离 鼠标event事件 属性 说明 offsetX 以当前元素左上角为原点, 距离元素顶部距离 offsetY 以当前元素左上角为原点, 距离元素左侧距离 clientX..., 距离页面顶部距离, 随页面滚动而改变 pageY 以整个页面的左上角为原点, 距离页面左侧距离, 随页面滚动而改变 screenX 以计算机显示屏屏幕左上角为原点, 距离屏幕顶部距离 screenY...以计算机显示屏屏幕左上角为原点, 距离屏幕左侧距离 元素及各种距离 宽 属性 说明 clientHeight/clientWidth 包括元素可视部分高度/宽度包括width/height...'px', 为字符串类型) 距离 属性 说明 offsetTop/Left 元素距离最近带有定位(fixed/relative/absolute)父元素顶部/左侧距离 scrollTop/Left...此属性可以获取或者设置对象最顶部到对象在当前窗口显示范围内顶边/左侧距离,也就是元素滚动条被向下/向右拉动距离。

9810

js获取屏幕以及元素宽方法

(包括边线宽) 网页正文全文宽:document.body.scrollWidth 网页正文全文:document.body.scrollHeight 网页被卷去:document.body.scrollTop...网页被卷去左:document.body.scrollLeft 三.滚动相关 scrollHeight: 获取对象滚动高度。...scrollWidth: 获取对象滚动宽度 document.documentElement.scrollTop 垂直方向滚动值 四.位置精确定位 scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容最左端之间距离...scrollTop:设置或获取位于对象最顶端和窗口中可见内容最顶端之间距离 offsetLeft:获取对象相对于版面或由 offsetParent 属性指定父坐标的计算左侧位置 offsetTop...相对容器水平坐标 event.offsetY 相对容器垂直坐标 六.width/clientWidth/offsetWidth以及height之间区别 width是指可见内容宽 height是指可见内容

6.7K20

img标签随机获取高质量图片

博主打算为自己在vps上挂载服务, 建立一个导航页, 于是写一个静态页面, 贴了几个超链接 后来, 感觉不美观, 就放了几张图片 服务器存储图片看了几遍就看腻了, 于是找了一个高质量图片api,...每次打开导航页都能看到随机封面 开源图片api使用 我想获得300*300, 关于book和library图片" https://source.unsplash.com/300x300/?...book,library 将随机图片嵌入到html中 <img src="https://source.unsplash.com/300x300/?...对于刚刚接触前端小伙伴, 使用开源图片库, 能让你页面更加丰富多彩, 提升学习兴趣. 对于前端老司机,可以获取定制化开源图片, 提升页面展示效果....如果你对图片质量有极致追求,https://source.unsplash.com 提供了丰富接口参数设置,可以定制化随机图片范围, 当然也可以在unsplash.com 注册一个账号, 订阅特别主题图片

2.2K10

js 获取屏幕各种宽方法(浏览器兼容)

屏幕有效宽: window.screen.availHeight window.screen.availWidth 网页可见区域宽:document.body.clientWidth  网页可见区域...(包括边线宽)  网页正文全文宽:document.body.scrollWidth  网页正文全文:document.body.scrollHeight  网页被卷去:document.body.scrollTop...scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容最左端之间距离  scrollTop:设置或获取位于对象最顶端和窗口中可见内容最顶端之间距离  scrollWidth:获取对象滚动宽度...  offsetHeight:获取对象相对于版面或由父坐标 offsetParent 属性指定父坐标的高度  offsetLeft:获取对象相对于版面或由 offsetParent 属性指定父坐标的计算左侧位置...  offsetTop:获取对象相对于版面或由 offsetTop 属性指定父坐标的计算顶端位置  event.clientX 相对文档水平座标  event.clientY 相对文档垂直座标

3.5K100

JS魔法堂:IMG元素加载行为详解

一、前言                               在《JS魔法堂:jsDeferred源码剖析》中我们了解到img元素加载失败可以作为函数异步执行优化方案,本文打算对img元素加载行为进行更深入探讨...readyState属性 ,用于表示IMG元素当前资源装载状态,默认值为"uninitialized",onload事件触发后变为"complete"(onload事件处理函数运行时,readyState...complete属性 ,用于表示IMG元素资源是否成功解析。默认为false,,onload事件触发后变为true(onload事件处理函数运行时,readyState依然为false)。...三、实验开始                             本次实验将创建 img元素 并对其 src属性 分别赋予以下内容 fsjohnhuang.png 、 :0 、 空字符串 、 空白字符串... 、 //:0 、 javascript:void 0 和 data:image/png,foo ,并订阅img元素onload和onerror事件,IE5~10下还订阅了onreadystatechange

2.7K60

js图片监听onload事件,依然有获取不到宽场景

背景 在实际开发中,移动端页面遇到,采用正常写法,图片 src赋值写在 onload 事件监听 后面,依然会有拿不到 图片真实宽场景,获得图片宽都为0,真的是好坑啊。...var img_url = '.jpg' // 创建对象 var img = new Image() // 加载完成执行 img.onload = function(){ console.log...(img.width,img.height) } // 改变图片src img.src = img_url 解决 参考了该文章 关键时刻,还是得靠定时器轮询啊!!!...var img = new Image() // 改变图片src img.src = img_url // 定时执行获取 var check = function(){ // 只要任何一方大于...0 // 表示已经服务器已经返回宽 if (img.width>0 || img.height>0) { clearInterval(set); } } var

3.9K20

img标签写法

前言:img标签定义HTML页面中图像,标签有两个必需属性:src 和 alt,图像并不会插入HTML页面中,而是链接到HTML页面上。作用:向网页中嵌入一幅图像。...---- img标签写法 通过img标签可以在网页中引入一张照片,还可以调整照片宽度和高度,在html中高度用height="18px"表示,宽度用width="auto"表示。...---- 完整写法就是 在完整标签代码中高度和宽度位置可以颠倒过来写,高度和宽度也可以写成auto自动...,只要你确定其中一个px像素值的话你就可以auto自动确定另外一个值,当然我建议还是只需要写px值就行,宽度的话改为自动(auto)。...---- 思维导图(来自百度) ---- 总结 这个img标签可以给文字加图标,具体还是要在代码中文字面前加入img标签代码,引入你想要图标,当然图片大小不要太大,不然调出来大小不协调不好看

2.8K30
领券