Question

我的React组件的.scss文件中有一个元素集的边距：

.element {
    margin: 20px;
}

我想用内联样式中设置为margin的值来总结此值：

<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/

Answer 2

试试这个

function myfns() {

  var x = document.getElementById("mytxt").value

  document.getElementById("p2").style.margin = x + "px";

}

<div id="p2" className="scss.element" style=" margin: 10px ">Whatever</div>
<input type="number" id="mytxt" />
<button onclick="myfns()">Set Margin</button>

Answer 3

试试这个： jsfiddle

var marginStyle=parseInt(document.getElementById("element").style.margin) ;


var marginCss=parseInt($(".element").css("margin"));

var sum=marginStyle+marginCss;
$("p").html( 'Style margin '+marginStyle+'<br> Css margin '+marginCss +'<br>sum '+sum);

$(".element").css("cssText", "margin:"+sum+"px !important;");

使用css样式汇总内联样式的值

3 个答案: