jQueryで変数を使用して計算を行う方法は？

Question

divのほとんどのCSSプロパティを変更できるようにするプログラムを作成しています。私はそれを中心にする必要があります、私は通常これを行う方法は、以下のCSSコードです。

div { 
    position: fixed; 
    background: black; 
    width: 100px; 
    height: 100px; 
    top: calc(50% - 50px); 
    right: calc(50% - 50px); 
} 

私は自分の変数は、しかし、その後2によってそれらを分割し、50％から離れて取る上と右の特性のための計算を行う幅と高さを確認する必要があります。

var width = 100; 
var height = 100; 
var top = (height/2); 
var right = (width/2); 

$('div') 
    .css('position','fixed') 
    .css('background','black') 
    .css('width',width + 'px') 
    .css('height',height + 'px') 
    .css('top','calc(50% - ' + top + 'px)') 
    .css('right','calc(50% - ' + right + 'px)'); 

CSSプロパティの値として変数を使用しているときに、中央揃えのdivを作成するにはどうすればよいですか？

Answer 1

厄介なIEをサポートする必要がない場合、CSS変数はオプションです。

CSS

1. は、あなたのスタイルシート内の範囲を選択してください。 DOM上のセレクタが高いほど、より多くの情報がカバーされます。スニペットでは可能な限り最高のものを選択しました：:root（つまりhtml）
2. CSS変数の宣言：:root --half: 50px CSSVarの前に2つのダッシュを付ける必要があります。スニペットでは、私はの値で:rootに--halfと宣言しています。
3. 次に、適切なプロパティにCSSVarを割り当てる：
   • top: calc(50% - var(--half));
   • right: calc(50% - var(--half));

のJavaScript

1. 詳細は、スニペットにコメントされています。

あなたは[CSSカルクの代替jqueryの使用]が表示される場合があります

// Reference the input 
 
var A = document.getElementById('input1'); 
 

 
// On input event on input#A call setHalf() function 
 
A.addEventListener('input', setHalf, false); 
 

 
/* setHalf() accesses the CSS by the CSSDeclaration 
 
|| interface. 
 
*/ 
 
function setHalf(e) { 
 
    // Reference the div 
 
    var X = document.getElementById('shape1'); 
 

 
    /* Get div#shape1 computedStyle in order to 
 
    || access it's ruleset declarations. 
 
    */ 
 
    var Y = window.getComputedStyle(X); 
 

 
    // Get the value of the CSSVar --half 
 
    var Z = Y.getPropertyValue('--half'); 
 

 
    // Set --half value to the value of input#A 
 
    X.style.setProperty('--half', this.value + 'px'); 
 
}

:root { 
 
    --half: 50px; 
 
} 
 
#shape1 { 
 
    position: fixed; 
 
    background: black; 
 
    width: 100px; 
 
    height: 100px; 
 
    top: calc(50% - var(--half)); 
 
    right: calc(50% - var(--half)); 
 
    border: 1px solid black; 
 
}

<div id='shape1'></div> 
 
<input id='input1' type='number' min='-150' max='150' value='50'>

Answer 2

私は、変数名として "top"または "right"という単語を使用することができません。

ここで、動作したコードがあります。

var width = 100; 
var height = 100; 
var test1 = width/2; 
var test2 = height/2; 

$('div') 
    .css('position','fixed') 
    .css('background','black') 
    .css('width',width + 'px') 
    .css('height',height + 'px') 
    .css({'top':'calc(50% - ' + test1 + 'px)'}) 
    .css({'right':'calc(50% - ' + test2 + 'px)'});