mootoolsのネガティブマージン

Question

現在のユーザーブラウザのサイズを取得し、サイズの半分に基づいてヘッダーを中央に配置したいと考えています。 （MooToolsは付き）

CSS

#header{position:absolute; left:50%; } 

Javascriptを

var width = $(document.body).getStyle('width'); 
var margin = width/2; 

$('header').setStyles({'width': width, 'margin-left': -(margin.toInt())}); 

ありがとう！

Answer 1

ここで問題となるのは、いくつかのプロパティーで数字をとることができます（それに単位を追加することもできます）、または単にそれに指定した文字列を使用することです。文字列を与えているので、'-'+...を前置すると、ユニットなしでCSS margin-left:-34が作成されます。番号を付けたり、自分で追加することができます。また、あなたは上記の私の質問に答えた後、私はあなたが達成できることを注意しましょう

var width = $(document.body).getStyle('width'); 
var margin = width.toInt()/2; 

$('header').setStyle('margin-left', -(margin.toInt())); 
// or 
$('header').setStyle('margin-left', '-'+margin.toInt()+'px'); 

（でgetStyleは「PX」で文字列を返しますよう）あなたは2で割る前に、幅が数であることを確認する必要がありますこのW/O JavaScriptまたは負のマージン#headerは（としない比較的位置決め要素内）全幅で、画面の上部に位置するようになっている場合：

#header {position:absolute; top:0px; left:0px; width:100%;}