Question

请考虑以下代码：

[example.htm]
<link rel="stylesheet" src="myStyle.css" />
<style>
    div {margin-left: 100px} /* let's assume this margin value is dynamically generated in PHP/ASP/JSP and we dont't have control over it */
</style>
<body>
    <div>foo</div>
    <div class="indent-me-more-please">bar</div> <!-- let's assume we don't have control over this part, either -->
</body>

和

[myStyle.css]
.indent-me-more-please {margin-left: * !important}

是否可以将边距值（标记为*）设置为始终比仅在<style>标记中设置的值或者例如设置时的值大50px。在元素属性？在这种情况下：100px + 50px = 150px。像“margin-left += 50px;”这样的东西，我不知道，有什么东西要调用，相对价值在增加？

是否可以在纯CSS中执行此操作？

Answer 1

CSS不支持。

在您的特定示例中，您可以使用padding-left添加额外空间。

Answer 2

这需要一种不同类型的语言，例如 SASS http://sass-lang.com/，你可以添加变量，例如

$margin-left: 50px;
#container{
 margin = $margin-left + 10px;
}

但要使用sass，您需要为它准备服务器......

Answer 3

您可以使用jQuery执行此操作

DEMO http://jsfiddle.net/kevinPHPkevin/EJzue/

$('div').css('margin-left', function (index, curValue) {
    return parseInt(curValue, 10) + 100 + 'px';
});

在CSS中调整循环数字属性的值而不是覆盖它

3 个答案: