原生JavaScript获取元素的padding内边距

 Window.getComputedStyle()方法返回一个对象,该对象在应用活动样式表并解析这些值可能包含的任何基本计算后报告元素的所有 CSS 属性的值。私有的 CSS 属性值可以通过对象提供的 API 或通过简单地使用 CSS 属性名称进行索引来访问。

getComputedStyle语法:

let style = window.getComputedStyle(element, [pseudoElt]); 
//第一个参数是指定元素的dom对象
//pseudoElt伪元素拉取样式信息 比如, ::after, ::before, ::marker, ::line-marker。非必需

返回值:CSSStyleDeclaration - Web API 接口参考 | MDN

属性

CSSStyleDeclaration.cssText (en-US)

当前声明块的文本内容。设置此属性会改变样式。

CSSStyleDeclaration.length

属性的数量。参照下面的 item() 方法。

CSSStyleDeclaration.parentRule (en-US)

包含当前声明块的 CssRule。

方法

CSSStyleDeclaration.getPropertyPriority()

返回可选的优先级,"important"。

CSSStyleDeclaration.getPropertyValue()

返回给定属性的值。

CSSStyleDeclaration.item()

返回用 index 标记的属性名,当 index 越界时返回空字符串。 另一个可选方案:使用 nodeList[i](在 i 越界时返回 undefined)获取。通常在非 JavaScript Dom 实现方案是很有用。

CSSStyleDeclaration.removeProperty()

从 CSS 声明块中删除属性。

CSSStyleDeclaration.setProperty()

在 CSS 声明块中修改现有属性或设置新属性。

CSSStyleDeclaration.getPropertyCSSValue() 已弃用

仅在火狐浏览器中支持 getComputedStyle. 返回 CSSPrimitiveValue (en-US) or null for shorthand properties.

let elem1 = document.getElementById("elemId");
let style = window.getComputedStyle(elem1, null);
let paddingL = parseFloat(style.getPropertyValue('padding-left')); //获取左侧内边距
let paddingR = parseFloat(style.getPropertyValue('padding-right')); //获取右侧内边距
let w = parseFloat(style.getPropertyValue('width')); // 获取实际宽度
let concentW = Number(w = paddingL - paddingR ); //实际内容宽度

与伪元素一起使用:

<style>h3::after {content: "rocks!";}
</style><h3>generated content</h3><script>let h3 = document.querySelector("h3"),result = getComputedStyle(h3, "::after").content;alert(`the generated content is: ${result}`);console.log(`the generated content is: ${result}`);// the generated content is: "rocks!"
</script>

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

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

相关文章

Javaweb之SpringBootWeb案例之自动配置案例的自定义starter分析的详细解析

3.2.4.1 自定义starter分析 前面我们解析了SpringBoot中自动配置的原理&#xff0c;下面我们就通过一个自定义starter案例来加深大家对于自动配置原理的理解。首先介绍一下自定义starter的业务场景&#xff0c;再来分析一下具体的操作步骤。 所谓starter指的就是SpringBoot当…

iptables与内核的交互

关于iptables的的工作原理&#xff0c;主要分为三个方面&#xff1a;用户程序对规则的处理&#xff0c;内核对用户命令的处理&#xff0c;内核中netfilter对数据包的过滤(Ref:netfilter分析3-钩子函数执行流程)。  本文大致分析iptables用户态程序如何解析规则&#xff0c;并将…

java 多线程分段下载

java 多线程分段下载 介绍 使用java 多线程下载&#xff0c;当前只是一个demo,还没进行对比测试&#xff0c;目前看速度确实要快一些 实现和简单就是启用多个现成分段下载&#xff0c;最后再组合在一起 完整代码 原本是下载tomcat10的&#xff0c;但是我本地jdk不符&#…

机器人工具箱学习(二)

一、机械臂及运动学 1.1 机械臂构成 机械臂多采用关节式机械结构&#xff0c;一般具有6个自由度&#xff0c;其中3个用来确定末端执行器的位置&#xff0c;另外3个则用来确定末端执行装置的方向(姿态)。   如图所示&#xff0c;一个机械臂是由一组可做相对运动的关节连接的连…

Arduino应用开发——使用GUI-Guider制作LVGL UI并导入ESP32运行

Arduino应用开发——使用GUI-Guider制作LVGL UI并导入ESP32运行 目录 Arduino应用开发——使用GUI-Guider制作LVGL UI并导入ESP32运行前言1 使用GUI-Guider设计UI1.1 创建工程1.2 设计UI 2 ESP工程导入UI2.1 移植LVGL2.2 移植UI文件2.3 调用UI文件2.4 烧录测试 结束语 前言 GU…

二维码门楼牌管理系统技术服务:楼牌编设规则详解

文章目录 前言一、院落内新增楼栋的楼牌编制二、围合式或分片式建筑群的楼牌编设三、围合单位建筑内部的楼牌编制四、独栋单位建筑的楼牌编制五、无名称院落的楼牌编制六、同一裙楼上多栋楼房的楼牌编制 前言 随着城市建设的快速发展&#xff0c;门楼牌管理成为城市管理的重要…

利用大模型技术进行测试用例生成哪家公司做的比较好

在利用大模型技术进行测试用例生成方面&#xff0c;有多家公司做得比较好。以下是一些在该领域表现出色的公司&#xff1a; Microsoft&#xff1a;Microsoft 在大模型技术和自动化测试方面有着丰富的经验。他们的Azure DevOps平台提供了强大的测试用例管理和生成功能&#xff0…

c++和python的互相调用

文章目录 前提ctypespybind11在python中调用C在C中调用python Cython加快python速度在C中调用python代码 调用Python的原生C API参考链接 前提 因项目需求&#xff0c;需要在C中调用python&#xff0c;对这方面的一些工具做个简单的介绍。 ctypes ctypes 是 Python 的外部函…

山西电力市场日前价格预测【2024-02-27】

日前价格预测 预测说明&#xff1a; 如上图所示&#xff0c;预测明日&#xff08;2024-02-27&#xff09;山西电力市场全天平均日前电价为332.28元/MWh。其中&#xff0c;最高日前电价为544.59元/MWh&#xff0c;预计出现在19:00。最低日前电价为211.48元/MWh&#xff0c;预计…

如何在Linux使用Docker部署Redis并结合内网穿透实现公网远程连接本地数据库

文章目录 前言1. 安装Docker步骤2. 使用docker拉取redis镜像3. 启动redis容器4. 本地连接测试4.1 安装redis图形化界面工具4.2 使用RDM连接测试 5. 公网远程访问本地redis5.1 内网穿透工具安装5.2 创建远程连接公网地址5.3 使用固定TCP地址远程访问 正文开始前给大家推荐个网站…

还在手动Word转PPT?快来试试这些一键生成工具!

在我们日常的工作和学习中&#xff0c;将Word转化成PPT的需求时常出现&#xff0c;尤其是当我们需要进行演讲或者报告时。这不仅能使我们的演讲更具视觉冲击力&#xff0c;也有助于我们更好地传达信息。 那么&#xff0c;如何才能轻松地将Word转换成PPT呢&#xff1f;下面将为…

商家转账到零钱功能申请方法

商家转账到零钱是什么&#xff1f; 【商家转账到零钱】可以说是【企业付款到零钱】的升级版&#xff0c;商家转账到零钱可以为商户提供同时向多个用户微信零钱转账的能力&#xff0c;支持分销返佣、佣金报酬、企业报销、企业补贴、服务款项、采购货款等自动向用户转账的场景。…

Intel 芯片 Mac 如何重新安装系统

使用可引导安装器重新安装&#xff08;可用于安装非最新的 Mac OS&#xff0c;系统降级&#xff0c;需要清除所有数据&#xff0c;过程确保连接上网络&#xff0c;虽然这种方式不会下载 Mac OS&#xff0c;但是需要下载固件等信息&#xff09; 插入制作好的可引导安装器&#x…

leetcode 热题 100_找到字符串中所有字母异位词

题解一&#xff1a; 滑动窗口&#xff1a;类似于字符串匹配&#xff0c;但匹配异位词需要包含相同的字母及个数&#xff0c;可以分别用两个数组存储字符串s滑动窗口和字符串p的字母及个数&#xff0c;再用Array.equals()进行比对。对于s.length()<p.length()的情况需要特判。…

【python】python用户管理系统[简易版](源码+报告)【独一无二】

&#x1f449;博__主&#x1f448;&#xff1a;米码收割机 &#x1f449;技__能&#x1f448;&#xff1a;C/Python语言 &#x1f449;公众号&#x1f448;&#xff1a;测试开发自动化【获取源码商业合作】 &#x1f449;荣__誉&#x1f448;&#xff1a;阿里云博客专家博主、5…

怎么异地共享文件?

不同地点的团队成员之间共享文件是现代企业中常见的需求之一。随着分布式团队的不断增加&#xff0c;找到一种安全、高效的方式来实现异地共享文件变得尤为重要。本文将介绍一种名为【天联】的工具&#xff0c;它可以帮助团队成员在异地互相共享文件。 【天联】是一种专门为异地…

.NET Core Web API扩展框架

在.NET Core Web API中&#xff0c;你可以使用各种扩展框架和库来增强应用程序的功能和性能。这些扩展框架可以涵盖多个方面&#xff0c;包括认证与授权、异常处理、日志记录、API文档生成、性能监控等。以下是一些常用的.NET Core Web API扩展框架&#xff1a; 认证与授权 AS…

Corel 会声会影 2023 激活码 会声会影 2023 序列号生成器

会声会影 2023 已经出来很长时间了&#xff0c;但是对它的热爱一直持续不减&#xff0c;今天我给大家带来2023版本为用户带来的多个全新功能&#xff0c;可以更好的编辑视频&#xff0c;不过软件还是付费的&#xff0c;为此我带来了会声会影 2023序列号生成器&#xff0c;可以轻…

STM32 | STM32时钟分析、GPIO分析、寄存器地址查找、LED灯开发(第二天)

STM32 第二天 一、 STM32时钟分析 寄存器&#xff1a;寄存器的功能是存储二进制代码&#xff0c;它是由具有存储功能的触发器组合起来构成的。一个触发器可以存储1位二进制代码&#xff0c;故存放n位二进制代码的寄存器&#xff0c;需用n个触发器来构成 在计算机领域&#x…

数码管的动态显示(一)

1.原理 把每一个数码管闪烁的时间设置为1ms&#xff0c;肉眼观察不到就会认为6个数码管在同时闪烁。 实验目标&#xff1a; 使用6位8段数码管实现数码管的动态显示&#xff0c;显示的内容就是0-999_999。当计数到最大值&#xff0c;让他归零&#xff0c;然后循环显示。每0.1秒…