css - cssプロパティに合計を設定します

Question

私は決定されたcssクラスを持ついくつかのdivを持っています。

topプロパティに手動でピクセルを追加したい：

.class {トップ：100px; }

div class = "class" style = "top：+ = 50px"

そのようなことをすることは可能ですか？

Answer 1

ここでは、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 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

いいえ、とにかく確実ではありません。

それを行う calc() と呼ばれる CSS3 プロパティがありますが、どこでも動作しませんが、最新のブラウザーとサポートは不安定かもしれません。

詳しくはこちら。 http://robertnyman.com/css3/calc/calc.html

これを行う理由によっては、LESS や SASS などの CSS プリプロセッサの使用を検討することをお勧めします。

これをやりたい理由は何ですか？提起された質問からすぐには明らかでない解決策があるかもしれません。

Answer 4

いいえ、CSS だけではありません。

サーバー側のコードまたはブラウザーの JavaScript を使用して実行できます。

別のアプローチは、変数と簡単な計算をサポートするLESSやSAASなどを使用することです。