元素上属性字段

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. 微服务框架——SpringBoot

    SpringBoot 1.创建Boot项目的两种方式 1.1通过spring网站创建 进入Spring Initializr 选择填写对应配置,打包 将zip格式的压缩包解压,并导入该项目 1.2 通 ...

  2. 一个小而美的 C 语言项目

    我最近在学习 C 语言,看的一本书叫做 <C Primer Plus>,这本书对 C 语言的描写.特性介绍.代码示例都介绍的比较详细,是小白入门 C 语言非常不错的一本书,还有一本经典书叫 ...

  3. Java学习笔记 :2021年12月31日 上午

    Java学习笔记 :2021年12月31日 上午 目录 Java学习笔记 :2021年12月31日 上午 关于计算机语言 1.关于语言的分类 2.小结 关于Java语言的基础语法 1.主方法 2.其他 ...

  4. 腾讯微信开源数据库PhxSQL简单部署记录

    1.建立文件夹与互信关系 [root@mysql-100 ~]# mkdir -p /app/soft/phxsql [root@mysql-100 phxsql]# ssh-keygen -t rs ...

  5. vue基础之keep-alvie保持历史页面数据不变,切换页面后数据不变keep-alvie

    1:路由配置文件设置 { path: '/MenuM', component: Layout, redirect: '/MenuM', children: [ { path: 'MenuM', nam ...

  6. Qt添加自定义控件

    由于在自带的控件中没有发现滚动选择时间的控件,所以参考网上别人写的控件做了一点修改. 先看效果: 上代码: TimeScroll.h QT_BEGIN_NAMESPACE namespace Ui { ...

  7. ChatGPT保姆级注册教程

    ChatGPT保姆级注册教程 最近几天OpenAI发布的ChatGPT聊天机器人火出天际了,连着上了各个平台的热搜榜.这个聊天机器人最大的特点是模仿人类说话风格同时回答大量问题. 有人说ChatGPT ...

  8. Nginx01 简介和安装

    1 简介 Nginx (engine x) 是一个高性能的HTTP和反向代理web服务器,同时也提供了IMAP/POP3/SMTP服务.Nginx是由伊戈尔·赛索耶夫为俄罗斯访问量第二的Rambler ...

  9. redis georadius源码分析与性能优化

    原文地址: https://blog.fanscore.cn/a/51/ 背景 最近接到一个需求,开发中使用了redis georadius命令取附近给定距离内的点.完工后对服务进行压测后发现geor ...

  10. P34_数据请求 - GET和POST请求

    网络数据请求 小程序中网络数据请求的限制 出于安全性方面的考虑,小程序官方对数据接口的请求做出了如下两个限制: 只能请求 HTTPS 类型的接口 必须将接口的域名添加到信任列表中 配置 request ...