元素上属性字段

const el = document.getElementById('documentLabel')
console.log(el.clientWidth) // 可见区域宽
console.log(el.clientHeight) // 可见区域高
console.log(el.offsetWidth) // 可见区域宽 + 边线的宽
console.log(el.offsetHeight) // 可见区域高 + 边线的宽
console.log(el.scrollWidth) // 正文全文宽
console.log(el.scrollHeight) // 正文全文高
console.log(el.screenTop) // 被卷去的高
console.log(el.scrollLeft) // 被卷去的左

浏览器属性

console.log(window.screenTop) // 网页正文部分上
console.log(window.screenLeft) // 网页正文部分左
console.log(window.screen.height) // 屏幕分辨率的高
console.log(window.screen.width) // 屏幕分辨率的宽
console.log(window.screen.availHeight) // 屏幕可用工作区高度
console.log(window.screen.availWidth) // 屏幕可用工作区宽度

  

JS:获取元素属性的更多相关文章

  1. JS获取元素属性和自定义属性

    获取元素的属性分为两种类型: 1-获取元素常见的属性(class,id,type,value……) 2-获取自定义的元素的属性(data-value,data-mess…….) 获取元素的属性,设置元 ...

  2. js获取元素属性值为空的原因和解决办法

    问题描述:js获取某元素的属性值为空 代码: <!-- css定义在head中 --> <style> #box{ width: 100px; height: 100px; b ...

  3. JS获取元素属性

    <style> *{ box-sizing: border-box; } html, body { margin: 0px; width: 100%; height: 100%; over ...

  4. JS获取元素属性、样式getComputedStyle()和currentStyle方法兼容性问题

    1. getComputedStyle()  方法获取到的是经过计算机/浏览器计算后的样式 getComputedStyle($("#div")).width; 兼容性:IE6 7 ...

  5. JS(原生js和jq方式)获取元素属性(自定义属性),删除属性(自定义属性)

    JS(原生js和jq方式)获取元素属性(自定义属性),删除属性(自定义属性) 以下内容: 一.获取元素的属性 二.设置元素的属性 三.删除元素的属性 一.获取元素的属性 1-原生JS 获取属性 .ge ...

  6. js+jquery动态设置/添加/删除/获取元素属性的两种方法集锦对照(动态onclick属性设置+动态title设置)

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN" "http://www.w3.org/TR/REC-html140 ...

  7. JS中获取元素属性的逆天大法

    给大家聊下js中获取元素属性的逆天大法,胆小慎入,切记切记!!! innerHTML.outerHTML.innerText .outerText.value.text().html(),val() ...

  8. Js获取元素样式值(getComputedStyle&currentStyle)兼容性解决方案

    因为:style(document.getElementById(id).style.XXX)只能获取元素的内联样式,内部样式和外部样式使用style是获取不到的. 一般js获取内部样式和外部样式使用 ...

  9. 【全面总结】js获取元素位置大小

    [js获取元素位置+元素大小]全面总结 目录 1.关于offset offsetParent(只读) offsetTop(只读) offsetLeft(只读) offsetHeight(只读) off ...

  10. JQ方法实用案例///鼠标移动到div和修改ipt中弹窗、CSS鼠标变小手、JQ获取元素属性、JQ选择器

    今天学习了jQ,jQ对js的帮助很大,菜鸟教程上也有属性.可以查看 js 和 jquery主要的区别 在 dom    想用jquery  必须先引入(顺序问题)        先css 再js:   ...

随机推荐

  1. DVWA靶场实战(三)——CSRF

    DVWA靶场实战(三) 三.CSRF: 1.漏洞原理: CSRF(Cross-site request forgery),中文名叫做"跨站请求伪造",也被称作"one c ...

  2. (8)go-micro微服务Mysql配置

    目录 一 gorm介绍 二 gorm安装 1.1 下载依赖 1.2 使用MySQL驱动 三 CURD操作 1. 查询 1.1 单行查询 1.2 多行查询 2. 插入数据 3. 更新数据 4. 删除数据 ...

  3. group by 语句怎么优化?

    一.一个简单使用示例 我这里创建一张订单表 CREATE TABLE `order_info` ( `id` int NOT NULL AUTO_INCREMENT COMMENT '主键', `or ...

  4. 跟AWS学极致服务

    春节期间,除了还在看技术书籍外,我一直抽空断断续续地在看<极致服务:创造不可思议的客户体验>一书.之前创业的经历,让我一直反思,除了赛道和落地之外,是否在服务质量上也有缺失. 书里从一个商 ...

  5. angular组件共用服务打印日志父子组件传值2创建服务注入

  6. 路由分发、名称空间、视图层之必会的三板斧、JsonResponse对象、request获取文件、FBV与CBV、模板层语法传值

    路由分发.名称空间.视图层之必会的三板斧.JsonResponse对象.request获取文件.FBV与CBV.模板层语法传值 一.昨日内容回顾 二.路由分发 1.djiango的每个应用都有主见的t ...

  7. 记一下Mybatis Plus遇到的现象

    使用Springboot+Mybaits plus,在Controller中直接调用Service中的方法,没有配置事务,就算是在Services上加了@Transactional也是没有事务的,可以 ...

  8. java入门与进阶P-6.1+P-6.2

    字符类型 字符型char在Java语言中占用 2 个字节,char类型的字面量必须使用半角的单引号括起来,取值范围为[ 0 - 65535 ],char 和 short 都占用 2 个字节,但是 ch ...

  9. ATM项目开发

    目录 一.项目开发流程 1.项目需求分析: 2.项目架构设计: 3.项目分组开发: 4.项目提交测试: 5.项目交付上线: 二.项目需求分析 1.主题 2.项目核心 3.项目需求: 4.从需求中提炼出 ...

  10. drf-jwt、simplejwt的使用

    1.接口文档 # 前后端分离 -我们做后端,写接口 -前端做前端,根据接口写app,pc,小程序 -作为后端来讲,我们很清楚,比如登录接口 /api/v1/login/---->post---- ...