mootools의 음수 마진

Question

현재 사용자 브라우저의 크기를 가져오고 크기의 절반을 기반으로 헤더를 가운데에 맞 춥니 다. (Mootools의 부착)

CSS

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

자바 스크립트

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

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

감사합니다!

Answer 1

여기에있는 문제는 setStyle의 경우 일부 속성에 숫자를 사용할 수 있으며 단위를 추가 할 수 있습니다. 또는 사용자가 지정한 문자열을 사용합니다. '-'+...을 붙이면 문자열이 주어 지므로이 장치없이 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로 분할하기 전에 또한, 확실 폭을해야하는 숫자입니다 이것은/자바 스크립트 또는 음의 마진 #header 경우 승을 전체 폭에, 화면의 상단에 위치하는데 (그리고 상대적 위치 요소 내) : 그것은의 폭을 설정처럼

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