为何getComputedStyle获取的值相加后无法生效？

你的问题不是模板字符串（Template Literal）的问题，而是数值类型不匹配导致的字符串拼接错误：

• distanceFromLeft是offsetLeft返回的纯数字（比如100）
• paddingLeft是getPropertyValue返回的带单位的字符串（比如20px）

当你直接执行distanceFromLeft + paddingLeft时，JS会把数字和字符串做拼接，结果变成类似"10020px"的无效值，自然无法正确应用样式。

修正代码 #

把paddingLeft转换成纯数值后再相加：

const el = document.querySelector('.row[data-target="row-offset"]');
const distanceFromLeft = el.offsetLeft;
// 用parseInt提取数值，去掉px单位
const paddingLeft = parseInt(window.getComputedStyle(el, null).getPropertyValue('padding-left'), 10);
const target = document.querySelector('#hero-carousel .flickity-page-dots');

target.style.left = `${distanceFromLeft + paddingLeft}px`;

如果需要支持非整数的padding值（比如12.5px），可以改用parseFloat：

const paddingLeft = parseFloat(window.getComputedStyle(el, null).getPropertyValue('padding-left'));

这样相加后得到的是正确的数值，再通过模板字符串拼接px，就能得到有效的CSSleft值了。

内容的提问来源于stack exchange，提问作者Grant Smith