javascript - 用 css 样式总结内联样式的值

Question

我在我的 React 组件的 .scss 文件中设置了一个元素的边距:

.element {
    margin: 20px;
}

我想将这个值与在内联样式中设置为边距的值相加:

<div className={scss.element} style={{ margin: 10px }}>Whatever</div>

最终结果应该是: margin: 30px

Answer 1

您需要做的是获取 CSS 文件的计算样式和内联样式并将它们添加在一起

我使用以下函数获取 CSS 文件样式:

https://stackoverflow.com/a/27527462/5814976

(谢谢老兄!https://stackoverflow.com/users/3894981/dude)

var cssElm = getStyle('.element'), cssVal = cssElm.split('margin:')[1].split(';')[0],

然后使用 vanilla blah.style 检索内联样式(这只会获取排名最高的样式，因此如果您的 CSS 文件中有 !important 标记，它只会再次得到它，最终结果将是 40px)。

inlineVal = elm[0].style.margin,

然后我们清理我们检索到的两个字符串(删除任何已应用的单位(em、px 等)，然后将它们加在一起:

totalVal = parseInt(cssVal.replace(/[^0-9.]/g, "")) + parseInt(inlineVal.replace(/[^0-9.]/g, "") );

最后将样式重新应用到原始元素。

elm[0].style.margin = totalVal + 'px';

你可以在这里看到一个工作示例:

https://jsfiddle.net/mdhkxhhd/