Question

我有几个具有确定css类的div。

我想手动将像素添加到top属性：

.class {top：100px; }

div class =“class”style =“top：+ = 50px”

是否有可能做到这样的事情？

Answer 1

不，无论如何都不可靠。

有一个叫做calc（）的CSS3属性可以做到，但除了最新的浏览器和支持外，它不会起作用。

此处有更多内容。 http://robertnyman.com/css3/calc/calc.html

根据您要执行此操作的原因，您可能需要考虑使用CSS预处理器，例如LESS或SASS。

您想要这样做的原因是什么？可能有一个解决方案从提出的问题中不能立即明显。

Answer 2

不是直接的CSS。使用像LESS或SASS这样的预处理器可以做到服务器端。

你可以用jQuery / JavaScript完成同样的事情。

var class = $('.class');
var top = class.css('top').substr(0,class.css('top').length - 2);
top += //your value here
class.css('top',top + 'px');

Answer 3

CSS3转换在这里可能很有用。像：

.class { top: 100px; }

div class="class" style="transform:translate(0,50px)"

您必须添加所有供应商前缀，例如：

style="transform:translate(0,50px);-webkit-transform:translate(0,50px);-o-transform:translate(0,50px);-ms-transform:translate(0,50px);-moz-transform:translate(0,50px)"

Answer 4

不，不仅仅是CSS。

您可以使用某些服务器端代码或浏览器中的JavaScript来执行此操作。

另一种方法可能是使用支持变量和简单计算的LESS或SAAS之类的东西。

在css属性中设置总和

4 个答案: