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>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/pingmian/67784.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

《Long Context Compression with Activation Beacon》笔记

Activation Beacon出自智源与人大在2024年1月放在arxiv上的论文《Long Context Compression with Activation Beacon》(v1版的题目&#xff1a;Soaring from 4K to 400K: Extending LLM’s Context with Activation Beacon&#xff09;。它引入了Beacon token将上下文信息蒸馏到…

线程池 | java中的多线程

在 《Java异步编程 | CompletableFuture--实现复杂的异步控制流 》中&#xff0c;我们提到了 通过 自定义线程池 &#xff0c; 用于管理 异步任务的执行&#xff0c;避免频繁创建和销毁线程&#xff0c;提高性能。 本文将整理并介绍一些 Java 中常见的 多线程创建方式&#xf…

Javaweb之css

css的三种引入方式 1内行式 2.内嵌式 3.外部样式表 内行式和内嵌式 <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.0&quo…

SQLmap 注入-03 获得用户信息

1: Sqlmap 先进入库&#xff0c;然后进入table, 然后列出column: sqlmap -u "http://192.168.56.133/mutillidae/index.php?pageuser-info.php&usernamexiaosheng&passwordabc&user-info-php-submit-buttonViewAccountDetails" --batch -p username -D …

mac 安装 python2

官网下载2.7&#xff1a; Python Release Python 2.7.18 | Python.org 查找地址&#xff1a; which python2 # /usr/local/bin/python2 设置 npm 使用 Python 2&#xff08;新建窗口&#xff09;&#xff1a; npm config set python /usr/local/bin/python2 验证 Python 版…

Jupyter notebook中运行dos指令运行方法

Jupyter notebook中运行dos指令运行方法 目录 Jupyter notebook中运行dos指令运行方法一、DOS(磁盘操作系统&#xff09;指令介绍1.1 DOS介绍1.2 DOS指令1.2.1 DIR - 显示当前目录下的文件和子目录列表。1.2.2 CD 或 CHDIR - 改变当前目录1.2.3 使用 CD .. 可以返回上一级目录1…

基于注解实现去重表消息防止重复消费

基于注解实现去重表消息防止重复消费 1. 背景/问题 在分布式系统中&#xff0c;消息队列&#xff08;如RocketMQ、Kafka&#xff09;的 消息重复消费 是常见问题&#xff0c;主要原因包括&#xff1a; 网络抖动&#xff1a;生产者或消费者因网络不稳定触发消息重发。消费者超…

Biotin sulfo-N-hydroxysuccinimide ester ;生物素磺基-N-羟基琥珀酰亚胺酯;生物素衍生物;190598-55-1

一、生物素及其衍生物的概述 生物素衍生物是指在生物素&#xff08;Vitamin H或B7&#xff09;分子基础上进行化学修饰得到的衍生化合物。这些衍生化合物在生物医学研究、临床诊断和药物开发等领域有着广泛的应用。 生物素&#xff08;Biotin&#xff09;是一种水溶性维生素&a…

Ubuntu如何安装redis服务?

环境&#xff1a; Ubuntu22.04 WSL2 问题描述&#xff1a; 如何安装redis服务&#xff1f; 解决方案&#xff1a; 1.在 Linux 上&#xff08;如 Ubuntu/Debian&#xff09;安装 1.通过包管理工具安装 Redis 服务器&#xff1a; sudo apt update sudo apt install redis…

Datawhale组队学习笔记task2——leetcode面试题

文章目录 写在前面Day5题目1.0112.路径总和解答2.0113路径总和II解答3.0101.对称二叉树解答 Day6题目1.0124.二叉树中的最大路径和解答2.0199.二叉树的右视图解答3.0226.翻转二叉树解答 Day7题目1.0105.从前序与中序遍历序列构造二叉树解答2.0098.验证二叉搜索树解答3.0110.平衡…

Slate文档编辑器-Node节点与Path路径映射

Slate文档编辑器-Node节点与Path路径映射 在之前我们聊到了slate中的Decorator装饰器实现&#xff0c;装饰器可以为我们方便地在编辑器渲染调度时处理range的渲染&#xff0c;这在实现搜索替换、代码高亮等场景非常有用。那么在这篇文章中&#xff0c;我们聊一下Node节点与Pat…

麒麟系统中删除权限不够的文件方法

在麒麟系统中删除权限不够的文件&#xff0c;可以尝试以下几种方法&#xff1a; 通过修改文件权限删除 打开终端&#xff1a;点击左下角的“终端”图标&#xff0c;或者通过搜索功能找到并打开终端 。定位文件&#xff1a;使用cd命令切换到文件所在的目录 。修改文件权限&…

Kotlin语言的正则表达式

Kotlin语言中的正则表达式 引言 正则表达式作为一种强大的文本处理工具&#xff0c;广泛应用于字符串匹配、数据验证、文本搜索等场景。在Kotlin语言中&#xff0c;正则表达式的应用同样得到了广泛关注。Kotlin不仅具备与Java相同的正则表达式功能优势&#xff0c;还提供了更…

Flask简介与安装以及实现一个糕点店的简单流程

目录 1. Flask简介 1.1 Flask的核心特点 1.2 Flask的基本结构 1.3 Flask的常见用法 1.3.1 创建Flask应用 1.3.2 路由和视图函数 1.3.3 动态URL参数 1.3.4 使用模板 1.4 Flask的优点 1.5 总结 2. Flask 环境创建 2.1 创建虚拟环境 2.2 激活虚拟环境 1.3 安装Flask…

RFID系统安全认证协议及防碰撞算法研究(RFID Security)

目录 1.摘要 2.引言 3.前人研究成果 3.1 RFID系统协议模型 3.2 RFID系统安全认证协议分类 3.3 RFID安全认证协议及其研究 3.3.1 超轻量级安全认证协议及其研究 3.3.2 轻量级安全认证协议及其研究 3.3.2 中量级安全认证协议及其研究 3.3.3 重量级安全认证协议及其研究…

Docker 实现MySQL 主从复制

一、拉取镜像 docker pull mysql:5.7相关命令&#xff1a; 查看镜像&#xff1a;docker images 二、启动镜像 启动mysql01、02容器&#xff1a; docker run -d -p 3310:3306 -v /root/mysql/node-1/config:/etc/mysql/ -v /root/mysql/node-1/data:/var/lib/mysql -e MYS…

Spring MVC:设置响应

目录 引言 1. 返回静态页面 1.1 Spring 默认扫描路径 1.2 RestController 1.2.1 Controller > 返回页面 1.2.2 ResponseBody 2. 返回 HTML 2.1 RequestMapping 2.1.1 produces(修改响应的 Content-Type) 2.1.2 其他属性 3. 返回 JSON 4. 设置状态码 4.1 HttpSer…

在Windows/Linux/MacOS C++程序中打印崩溃调用栈和局部变量信息

打印崩溃调用栈和局部变量信息的方法有所不同。以下是针对 Windows、Linux 和 MacOS 的示例代码。 Windows 在 Windows 上&#xff0c;可以使用 Windows API 来捕获异常并打印调用栈。 #include <windows.h> #include <DbgHelp.h> #include <stdio.h> #in…

基于python+Django+mysql鲜花水果销售商城网站系统设计与实现

博主介绍&#xff1a;黄菊华老师《Vue.js入门与商城开发实战》《微信小程序商城开发》图书作者&#xff0c;CSDN博客专家&#xff0c;在线教育专家&#xff0c;CSDN钻石讲师&#xff1b;专注大学生毕业设计教育、辅导。 所有项目都配有从入门到精通的基础知识视频课程&#xff…

提示词的艺术----AI Prompt撰写指南(个人用)

提示词的艺术 写在前面 制定提示词就像是和朋友聊天一样&#xff0c;要求我们能够清楚地表达问题。通过这个过程&#xff0c;一方面要不断练习提高自己地表达能力&#xff0c;另一方面还要锻炼自己使用更准确精炼的语言提出问题的能力。 什么样的提示词有用&#xff1f; 有…