如何动态获取元素渲染后的实际padding-right有效值

问题解答 #

一、padding值的计算逻辑 #

em单位的相对规则如下：

• 普通CSS属性（比如padding、margin）使用em作为单位时，相对于当前元素自身的font-size计算值生效
• 只有元素自身的font-size属性使用em作为单位时，才相对于父元素的font-size计算值生效

按你给出的样式，初始的实际值计算逻辑为：
父元素font-size: 20px → 目标元素自身font-size计算值 = 20px * 2.75 = 55px → 目标元素padding-right实际值 = 55px * 0.25 = 13.75px

因此父元素的font-size是间接影响padding值，并非直接控制。

二、获取动态渲染后padding-right的正确方法 #

你之前使用innerWidth() - width()的方案失效，通常是受box-sizing配置、元素是否为行内元素、是否存在边框等因素干扰，直接读取浏览器计算后的最终样式即可，不需要手动计算：

原生JavaScript实现

// 获取带单位的实际渲染值，例如返回 "16.5px"
const computedPadding = window.getComputedStyle(document.querySelector('.word')).paddingRight
// 提取纯数值用于计算
const paddingNum = parseFloat(computedPadding)

jQuery实现

jQuery的css()方法已经封装了对计算后样式的读取逻辑，直接调用即可：

const computedPadding = $('.word').css('padding-right')
const paddingNum = parseFloat(computedPadding)

父元素的font-size修改后，重新调用上述代码就能拿到最新的有效值。

三、旧方案返回固定值的原因 #

innerWidth()返回元素包含padding的宽度，width()默认返回元素的内容宽度：

• 如果元素设置了box-sizing: border-box，width()返回的宽度已经包含了padding和边框，二者相减自然无法得到正确的padding值
• 如果目标元素是display: inline的行内元素，width()无法读取到正确的内容宽度，计算结果也会异常

内容的提问来源于stack exchange，提问作者Sara Ree