css - 在 CSS 属性中设置总和

Question

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

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

.class { 顶部：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 。