当前位置: 首页 > news >正文

Js:DOM中的样式(包含行内样式、滚动样式、可见区域样式等)

这部分还在更新

1、 获取行内样式:元素.style.样式名称

2、 获取当前正在显示的样式(只能读,不能修改,想要修改要使用style):

① 只有ie支持:元素.currentStyle.样式名称

② 其他浏览器:getComputedStyle(需要获取样式的元素,传递一个伪元素)

第二个参数一般传 null

该方法是 windows对象上中的方法
返回值:key是样式名,值是样式名的对象

③ 获取元素可见区的宽度和高度(不带px):
④ 获取元素整个的宽度和高度(不带px):
⑤ 获取当前元素的定位父元素(获取到离当前元素最近的祖先定位,如果没有开启定位的祖先元素,则返回body):
  • offsetParent - 包含width+padding+border
⑥ 获取当前元素相对于其定位父元素的水平偏移量:offsetLeft
⑦ 获取当前元素相对于其定位父元素的垂直偏移量:offsetTop
⑧ 获取滚动区域的宽度:scrollWidth
⑨ 获取滚动区域的高度:scrollHeight
⑩ 获取水平滚动条滚动的距离:scrollLeft
⑪ 获取垂直滚动条滚动的距离:scrollTop

当满足 scrollHeight - scrollTop == clientHeight ,说明垂直滚动条滚动到底

当满足 scrollWidth - scrollLeft == clientWidth, 说明水平滚动条滚动到底

onscroll事件:会在滚动条滚动的时候触发

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>body {margin: 0;padding: 0;}#app {/* position: relative; */}#box1 {width: 100px;height: 100px;background-color: pink;padding: 10px;margin: 5px;}</style>
</head>
<body><div id="app"><div id="box1" style="border: 6px solid blue;"></div></div><script>window.onload = function() {let box1Dom = document.getElementById("box1")// 获取行内样式:元素.style.样式名称let borderWidth = box1Dom.style.borderWidthconsole.log('borderWidth',borderWidth) // 6px// 设置(可以增加,也可以修改)样式box1Dom.style.borderColor = 'purple'console.log('行内样式Width',box1Dom.style.width) // 获取不到/*** 获取当前正在显示的样式(只能读,不能修改,想要修改要使用style):*  - 只有ie支持:元素.currentStyle.样式名称*  - 其他浏览器:使用windows对象上的 getComputedStyle() 方法,此方法接收两个参数:*     - 参数一:需要获取样式的元素*     - 参数二:传递一个伪元素,一般传null*     - 返回值:key是样式名,值是样式名的对象*/let box1DomCurrentStyle = getComputedStyle(box1Dom, null)console.log('当前正在显示的样式Width',box1DomCurrentStyle.width) // 100px/*** 获取元素可见区的宽度和高度(不带px):*   clientWidth - 包含width+padding*   clientHeight - 包含width+padding*/let box1DomClientWidth = box1Dom.clientWidthconsole.log('box1Dom可见宽度',box1DomClientWidth) // 120px/*** 获取元素整个的宽度和高度(不带px):*   offsetWidth - 包含width+padding+border*   offsetHeight - 包含width+padding+border*/let box1DomOffsetWidth = box1Dom.offsetWidthconsole.log('box1Dom整个的宽度',box1DomOffsetWidth) // 130px/*** 获取当前元素的定位父元素(获取到离当前元素最近的祖先定位,如果没有开启定位的祖先元素,则返回body):*   offsetParent - 包含width+padding+border*/let box1DomOffsetParent = box1Dom.offsetParentconsole.log('box1Dom的定位父元素',box1DomOffsetParent) // body/*** 获取当前元素相对于其定位父元素的水平偏移量:offsetLeft* 获取当前元素相对于其定位父元素的垂直偏移量:offsetTop*/let box1DomOffsetLeft = box1Dom.offsetLeftconsole.log('box1Dom相对于其定位父元素的水平偏移量',box1DomOffsetLeft) // 相对于body}</script>
</body>
</html>

相关文章:

Js:DOM中的样式(包含行内样式、滚动样式、可见区域样式等)

这部分还在更新 1、 获取行内样式&#xff1a;元素.style.样式名称 2、 获取当前正在显示的样式&#xff08;只能读&#xff0c;不能修改&#xff0c;想要修改要使用style&#xff09;&#xff1a; ① 只有ie支持&#xff1a;元素.currentStyle.样式名称 ② 其他浏览器&…...

【leetcode 26】28.找出字符串中第一个匹配项的下标 | 实现 strStr()==❗不会❗==

在一个串中查找是否出现过另一个串&#xff0c;这是KMP的看家本领。 // 方法一 class Solution {public void getNext(int[] next, String s){int j -1;next[0] j;for (int i 1; i < s.length(); i){while(j > 0 && s.charAt(i) ! s.charAt(j1)){jnext[j];}if…...

Unity自学之旅04

Unity自学之旅04 Unity自学之旅④&#x1f4dd; 跳跃&#x1f42f; 攻击&#x1f984; GUIGUI前置&#xff0c;显示收集物品数量和角色HpUGUI游戏暂停和重新开始 &#x1f917; 总结归纳 Unity自学之旅④ &#x1f4dd; 跳跃 public class PlayerBehaviorRigid : MonoBehavio…...

Unreal Engine 5 C++ Advanced Action RPG 十章笔记

第十章 Survival Game Mode 2-Game Mode Test Map 设置游戏规则进行游戏玩法 生成敌人玩家是否死亡敌人死亡是否需要刷出更多 肯定:难度增加否定:玩家胜利 流程 新的游戏模式类游戏状态新的数据表来指定总共有多少波敌人生成逻辑UI告诉当前玩家的敌人波数 3-Survival Game M…...

[Unity 热更方案] 使用Addressable进行打包管理, 使用AssetBundle进行包的加载管理.70%跟练

在正常的开发过程中我们经常遇到一些关于热更的方案,有一些已有的方案供我们选择,但是实机情况往往不尽如人意,各有优缺点. 现在我们同样有一个热更的需求,但是要求打包简单,加载过程可查,防止出现一些资源和流程的问题. 下面介绍我在项目中使用的方案. 打包方面使用Addressabl…...

人工智能领域单词:英文解释

目录 1、前言2、单词组1&#xff1a;15个3、单词组2&#xff1a;15个4、单词组3&#xff1a;15个5、单词组4&#xff1a;15个6、单词组5&#xff1a;15个 1、前言 亲爱的家人们&#xff0c;创作很不容易&#xff0c;若对您有帮助的话&#xff0c;请点赞收藏加关注哦&#xff0…...

工业网口相机:如何通过调整网口参数设置,优化图像传输和网络性能,达到最大帧率

项目场景 工业相机是常用与工业视觉领域的常用专业视觉核心部件&#xff0c;拥有多种属性&#xff0c;是机器视觉系统中的核心部件&#xff0c;具有不可替代的重要功能。 工业相机已经被广泛应用于工业生产线在线检测、智能交通,机器视觉,科研,军事科学,航天航空等众多领域 …...

NextJs - ServerAction获取文件并处理Excel

NextJs - ServerAction获取文件并处理Excel 一. 客户端二. ServerAction 处理 一. 客户端 use client; import { uploadExcel } from actions/batchInquirySystem/api; import type { UploadProps } from antd; import { Upload } from antd;/*** 创建问询内容*/ const Page …...

【深度学习项目】语义分割-FCN网络(原理、网络架构、基于Pytorch实现FCN网络)

文章目录 介绍深度学习语义分割的关键特点主要架构和技术数据集和评价指标总结 FCN网络FCN 的特点FCN 的工作原理FCN 的变体和发展FCN 的网络结构FCN 的实现&#xff08;基于Pytorch&#xff09;1. 环境配置2. 文件结构3. 预训练权重下载地址4. 数据集&#xff0c;本例程使用的…...

集群、分布式及微服务间的区别与联系

目录 单体架构介绍集群和分布式架构集群和分布式集群和分布式区别和联系 微服务架构的引入微服务带来的挑战 总结 单体架构介绍 早期很多创业公司或者传统企业会把业务的所有功能实现都打包在一个项目中&#xff0c;这种方式就称为单体架构 以我们都很熟悉的电商系统为例&…...

ConvBERT:通过基于跨度的动态卷积改进BERT

摘要 像BERT及其变体这样的预训练语言模型最近在各种自然语言理解任务中取得了令人印象深刻的性能。然而&#xff0c;BERT严重依赖于全局自注意力机制&#xff0c;因此存在较大的内存占用和计算成本。尽管所有的注意力头都从全局角度查询整个输入序列以生成注意力图&#xff0…...

C# 网络协议第三方库Protobuf的使用

为什么要使用二进制数据 通常我们写一个简单的网络通讯软件可能使用的最多的是字符串类型&#xff0c;比较简单&#xff0c;例如发送格式为(head)19|Msg:Heart|100,x,y,z…&#xff0c;在接收端会解析收到的socket数据。 这样通常是完全可行的&#xff0c;但是随着数据量变大&…...

「2024 博客之星」自研Java框架 Sunrays-Framework 使用教程

文章目录 0.序言我的成长历程遇到挫折&#xff0c;陷入低谷重拾信心&#xff0c;迎接未来开源与分享我为何如此看重这次评选最后的心声 1.概述1.主要功能2.相关链接 2.系统要求构建工具框架和语言数据库与缓存消息队列与对象存储 3.快速入门0.配置Maven中央仓库1.打开settings.…...

【Elasticsearch】Springboot编写Elasticsearch的RestAPI

RestAPI 初始化RestClient创建索引库Mapping映射 判断索引库是否存在删除索引库总结 ES官方提供了各种不同语言的客户端&#xff0c;用来操作ES。这些客户端的本质就是组装DSL语句&#xff0c;通过http请求发送给ES。 官方文档地址 由于ES目前最新版本是8.8&#xff0c;提供了全…...

Swift语言的学习路线

Swift语言的学习路线 引言 在现代程序开发中&#xff0c;Swift语言逐渐成为了移动应用程序开发的重要工具&#xff0c;尤其是在iOS和macOS平台上。自2014年发布以来&#xff0c;Swift以其易读性和强大的功能&#xff0c;受到越来越多开发者的青睐。对于初学者而言&#xff0c…...

63,【3】buuctf web Upload-Labs-Linux 1

进入靶场 点击pass1 查看提示 既然是上传文件&#xff0c;先构造一句话木马&#xff0c;便于用蚁剑连接 <?php eval($_POST[123])?> 将这两处的检查函数删掉 再上传木马 文件后缀写为.php 右键复制图片地址 打开蚁剑连接 先点击测试连接&#xff0c;显示成功后&…...

Leetcode:2239

1&#xff0c;题目 2&#xff0c;思路 循环遍历满足条件就记录&#xff0c;最后返回结果值 3&#xff0c;代码 public class Leetcode2239 {public static void main(String[] args) {System.out.println(new Solution2239().findClosestNumber(new int[]{-4, -2, 1, 4, 8})…...

自然语言处理与NLTK环境配置

自然语言处理(Natural Language Processing, NLP)是人工智能的重要分支,专注于计算机如何理解、分析和生成自然语言。自然语言是人类用于交流的语言,如中文、英文等,这使得自然语言处理成为沟通人与计算机的桥梁。近年来,NLP在诸多领域得到广泛应用,包括文本分析、语言翻…...

分布式搜索引擎02

1. DSL查询文档 elasticsearch的查询依然是基于JSON风格的DSL来实现的。 1.1. DSL查询分类 Elasticsearch提供了基于JSON的DSL&#xff08;Domain Specific Language&#xff09;来定义查询。常见的查询类型包括&#xff1a; 查询所有&#xff1a;查询出所有数据&#xff0c…...

使用 Logback 的最佳实践:`logback.xml` 与 `logback-spring.xml` 的区别与用法

在开发 Spring Boot 项目时&#xff0c;日志是调试和监控的重要工具。Spring Boot 默认支持 Logback 作为日志系统&#xff0c;并提供了 logback.xml 和 logback-spring.xml 两种配置方式。这篇文章将详细介绍这两者的区别、各自的优缺点以及最佳实践。 目录 一、什么是 Logbac…...

【爬虫开发】爬虫开发从0到1全知识教程第12篇:scrapy爬虫框架,介绍【附代码文档】

本教程的知识点为&#xff1a;爬虫概要 爬虫基础 爬虫概述 知识点&#xff1a; 1. 爬虫的概念 requests模块 requests模块 知识点&#xff1a; 1. requests模块介绍 1.1 requests模块的作用&#xff1a; 数据提取概要 数据提取概述 知识点 1. 响应内容的分类 知识点&#xff1a…...

鸿蒙UI(ArkUI-方舟UI框架)-开发布局

文章目录 开发布局1、布局概述1&#xff09;布局结构2&#xff09;布局元素组成3&#xff09;如何选择布局4&#xff09;布局位置5&#xff09;对子元素的约束 2、构建布局1&#xff09;线性布局 (Row/Column)概述布局子元素在排列方向上的间距布局子元素在交叉轴上的对齐方式(…...

代码随想录_字符串

字符串 344.反转字符串 344. 反转字符串 编写一个函数&#xff0c;其作用是将输入的字符串反转过来。输入字符串以字符数组 s 的形式给出。 不要给另外的数组分配额外的空间&#xff0c;你必须**原地修改输入数组**、使用 O(1) 的额外空间解决这一问题。 思路: 双指针 代…...

2025年1月17日(点亮三色LED)

系统信息&#xff1a; Raspberry Pi Zero 2W 系统版本&#xff1a; 2024-10-22-raspios-bullseye-armhf Python 版本&#xff1a;Python 3.9.2 已安装 pip3 支持拍摄 1080p 30 (1092*1080), 720p 60 (1280*720), 60/90 (640*480) 已安装 vim 已安装 git 学习目标&#xff1a;…...

Spring Boot自动配置原理:如何实现零配置启动

引言 在现代软件开发中&#xff0c;Spring 框架已经成为 Java 开发领域不可或缺的一部分。而 Spring Boot 的出现&#xff0c;更是为 Spring 应用的开发带来了革命性的变化。Spring Boot 的核心优势之一就是它的“自动配置”能力&#xff0c;它极大地简化了 Spring 应用的配置…...

React技术栈搭配(全栈)(MERN栈、PERN栈)

文章目录 1. MERN 栈2. PERN 栈3. React Next.js Node.js4. JAMstack (JavaScript&#xff0c; APIs&#xff0c; Markup)5. React GraphQL Node.js6. React Native Node.js结论 React作为前端框架已经成为了现代web开发的重要组成部分。在全栈开发中&#xff0c;React通常…...

Linux - 线程池

线程池 什么是池? 池化技术的核心就是"提前准备并重复利用资源". 减少资源创建和销毁的成本. 那么线程池就是提前准备好一些线程, 当有任务来临时, 就可以直接交给这些线程运行, 当线程完成这些任务后, 并不会被销毁, 而是继续等待任务. 那么这些线程在程序运行过程…...

以Python构建ONE FACE管理界面:从基础至进阶的实战探索

一、引言 1.1 研究背景与意义 在人工智能技术蓬勃发展的当下,面部识别技术凭借其独特优势,于安防、金融、智能终端等众多领域广泛应用。在安防领域,可助力监控系统精准识别潜在威胁人员,提升公共安全保障水平;金融行业中,实现刷脸支付、远程开户等便捷服务,优化用户体…...

使用Sum计算Loss和解决梯度累积(Gradient Accumulation)的Bug

使用Sum计算Loss和解决梯度累积的Bug 学习 https://unsloth.ai/blog/gradient&#xff1a;Bugs in LLM Training - Gradient Accumulation Fix 这篇文章的记录。 在深度学习训练过程中&#xff0c;尤其是在大批量&#xff08;large batch&#xff09;训练中&#xff0c;如何高…...

mfc操作json示例

首先下载cJSON,加入项目; 构建工程,如果出现, fatal error C1010: unexpected end of file while looking for precompiled head 在cJSON.c文件的头部加入#include "stdafx.h"; 看情况,可能是加到.h或者是.cpp文件的头部,它如果有包含头文件, #include &…...

C语言练习(18)

一个班10个学生的成绩&#xff0c;存放在一个一维数组中&#xff0c;要求找出其中成绩最高的学生成绩和该生的序号。 #include <stdio.h>#define STUDENT_NUM 10 // 定义学生数量int main() {int scores[STUDENT_NUM]; // 定义存储学生成绩的一维数组int i;// 输入10个…...

LeetCode 热题 100_全排列(55_46_中等_C++)(递归(回溯))

LeetCode 热题 100_两数之和&#xff08;55_46&#xff09; 题目描述&#xff1a;输入输出样例&#xff1a;题解&#xff1a;解题思路&#xff1a;思路一&#xff08;递归&#xff08;回溯&#xff09;&#xff09;&#xff1a; 代码实现代码实现&#xff08;思路一&#xff08…...

编译chromium笔记

编译环境&#xff1a; windows10 powershell7.2.24 git 2.47.1 https://storage.googleapis.com/chrome-infra/depot_tools.zip 配置git git config --global user.name "John Doe" git config --global user.email "jdoegmail.com" git config --global …...

PHP语言的数据库编程

PHP语言的数据库编程 引言 随着互联网的发展&#xff0c;动态网站已成为主流&#xff0c;而动态网站的核心就是与数据库进行交互。PHP&#xff08;超文本预处理器&#xff09;是一种流行的开源服务器端脚本语言&#xff0c;被广泛用于Web开发。它以其简单易学和功能强大而受到…...

【PGCCC】PostgreSQL 中表级锁的剖析

本博客解释了 PostgreSQL 中的锁定机制&#xff0c;重点关注数据定义语言 (DDL) 操作所需的表级锁定。 锁定还是解锁的艺术&#xff1f; 人们通常将数据库锁与物理锁进行比较&#xff0c;这甚至可能导致您订购有关锁的历史、波斯锁和撬锁技术的书籍。我们大多数人可能都是通过…...

1.10 自洽性(Self-Consistency):多路径推理的核心力量

自洽性(Self-Consistency):多路径推理的核心力量 随着人工智能尤其是大规模语言模型的不断进化,如何提升其推理能力和决策准确性成为了研究的重点。在这一背景下,**自洽性(Self-Consistency)**作为一种新的推理方法,逐渐展现出其强大的潜力。自洽性方法通过多路径推理…...

【24】Word:小郑-准考证❗

目录 题目 准考证.docx 邮件合并-指定考生生成准考证 Word.docx 表格内容居中表格整体相较于页面居中 考试时一定要做一问保存一问❗ 题目 准考证.docx 插入→表格→将文本转换成表格→✔制表符→确定选中第一列→单击右键→在第一列的右侧插入列→布局→合并单元格&#…...

Linux 信号(Signal)详解

信号&#xff08;Signal&#xff09;是 Linux 系统中用于进程间通信的一种机制。它是一种异步通知&#xff0c;用于通知进程发生了某个事件。信号可以来自内核、其他进程或进程自身。 信号的基本概念 信号的作用&#xff1a; 通知进程发生了某个事件&#xff08;如用户按下 Ct…...

【数据分享】1929-2024年全球站点的逐年最低气温数据(Shp\Excel\免费获取)

气象数据是在各项研究中都经常使用的数据&#xff0c;气象指标包括气温、风速、降水、湿度等指标&#xff01;说到气象数据&#xff0c;最详细的气象数据是具体到气象监测站点的数据&#xff01; 有关气象指标的监测站点数据&#xff0c;之前我们分享过1929-2024年全球气象站点…...

app版本控制java后端接口版本管理

java api version 版本控制 java接口版本管理 1 自定义 AppVersionHandleMapping 自定义AppVersionHandleMapping实现RequestMappingHandlerMapping里面的方法 public class AppVersionHandleMapping extends RequestMappingHandlerMapping {Overrideprotected RequestCondit…...

2024年度总结-CSDN

2024年CSDN年度总结 Author&#xff1a;OnceDay Date&#xff1a;2025年1月21日 一位热衷于Linux学习和开发的菜鸟&#xff0c;试图谱写一场冒险之旅&#xff0c;也许终点只是一场白日梦… 漫漫长路&#xff0c;有人对你微笑过嘛… 文章目录 2024年CSDN年度总结1. 整体回顾2…...

基于python的博客系统设计与实现

摘要&#xff1a;目前&#xff0c;对于信息的获取是十分的重要&#xff0c;我们要做到的不是裹足不前&#xff0c;而是应该主动获取和共享给所有人。博客系统就能够实现信息获取与分享的功能&#xff0c;博主在发表文章后&#xff0c;互联网上的其他用户便可以看到&#xff0c;…...

服务器日志自动上传到阿里云OSS备份

背景 公司服务器磁盘空间有限&#xff0c;只能存近15天日志&#xff0c;但是有时需要查看几个月前的日志&#xff0c;需要将服务器日志定时备份到某个地方&#xff0c;需要查询的时候有地方可查。 针对这个问题&#xff0c;想到3个解决方法&#xff1a; 1、买一个配置比较低…...

优化使用 Flask 构建视频转 GIF 工具

优化使用 Flask 构建视频转 GIF 工具 优化后的项目概述 在优化后的版本中&#xff0c;我们将实现以下功能&#xff1a; 可设置每个 GIF 的帧率和大小&#xff1a;用户可以选择 GIF 的帧率和输出大小。改进的用户界面&#xff1a;使用更现代的设计使界面更美观、整洁。自定义…...

leetcode:511. 游戏玩法分析 I

难度&#xff1a;简单 SQL Schema > Pandas Schema > 活动表 Activity&#xff1a; ----------------------- | Column Name | Type | ----------------------- | player_id | int | | device_id | int | | event_date | date | | games_playe…...

windows git bash 使用zsh 并集成 oh my zsh

参考了 这篇文章 进行配置&#xff0c;记录了自己的踩坑过程&#xff0c;并增加了 zsh-autosuggestions 插件的集成。 主要步骤&#xff1a; 1. git bash 这个就不说了&#xff0c;自己去网上下&#xff0c;windows 使用git时候 命令行基本都有它。 主要也是用它不方便&…...

【Python运维】Python与网络监控:如何编写网络探测与流量分析工具

《Python OpenCV从菜鸟到高手》带你进入图像处理与计算机视觉的大门! 解锁Python编程的无限可能:《奇妙的Python》带你漫游代码世界 随着互联网技术的快速发展,网络性能的监控与分析成为保障信息系统稳定运行的关键环节。本文深入探讨了如何利用Python语言构建高效的网络探…...

OpenCV相机标定与3D重建(61)处理未校准的立体图像对函数stereoRectifyUncalibrated()的使用

操作系统&#xff1a;ubuntu22.04 OpenCV版本&#xff1a;OpenCV4.9 IDE:Visual Studio Code 编程语言&#xff1a;C11 算法描述 为未校准的立体相机计算一个校正变换。 cv::stereoRectifyUncalibrated 是 OpenCV 库中的一个函数&#xff0c;用于处理未校准的立体图像对。该函…...

字玩FontPlayer开发笔记12 Vue3撤销重做功能

字玩FontPlayer开发笔记12 Vue3撤销重做功能 字玩FontPlayer是笔者开源的一款字体设计工具&#xff0c;使用Vue3 ElementUI开发&#xff0c;源代码&#xff1a;github | gitee 笔记 撤销重做功能是设计工具必不可少的模块&#xff0c;以前尝试使用成熟的库实现撤销重做功能…...

无人机图传模块:深入理解其工作原理与实际效用

无人机图传模块作为无人机系统的关键组成部分&#xff0c;承担着将无人机拍摄的图像和视频实时传输至地面控制站或接收设备的重任。本文将深入探讨无人机图传模块的工作原理及其在实际应用中的效用&#xff0c;帮助读者更好地理解这一技术的奥秘。 一、无人机图传模块的工作原…...