Отрицательное поле с 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

Ваша проблема в том, что setStyle для некоторых свойств может принимать число (и будет добавлять единицы к нему), или он просто будет использовать строку, которую вы ему даете. Поскольку вы даете ему строку, добавив '-'+..., она создаст CSS margin-left:-34 без устройства. Вы можете либо дать ему номер, либо добавить блок самостоятельно. Кроме того, вы должны убедиться, что ширина это число, прежде чем разделить на 2 (как GetStyle возвращает строку с «рх»)

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'); 

После того, как вы ответили на мой вопрос выше, я заметим, что вы можете сделать это без Javascript или отрицательных полей, если это #header предполагается расположить на верхней части экрана, на всю ширину (а не в пределах относительно позиционируемый элемент):

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