2015-12-03 3 views
0

Я не могу понять, как я могу элемент стиля со стилем JavaScript собственностьюJavascript стиля с переменной

<!DOCTYPE html> 
<html> 
<head> 
<style> 
#element { 
    width: 10px; 
    height: 10px; 
    position: relative; 
} 
</style> 
</head> 

<body> 
    <div id="element"></div> 
</body> 

<script> 
    var w = window.innerWidth; 
    var h = window.innerHeight; 
    var w_center = w/2; 
    var h_center = h/2; 
    var element = document.getElementById("element"); 

    element.style.left = w_center; 
</script> 
</html> 

правильным способ укладки с JavaScript является

element.style.left = "100px"; 

значение после знака равенства должен быть цитируется, но если я использую двойную кавычку с переменной, она не работает, потому что она будет преобразована в строку.

поэтому я попытался

<script> 
    var w = window.innerWidth; 
    var h = window.innerHeight; 
    var w_center = String(w/2); 
    var h_center = String(h/2); 
    var element = document.getElementById("element"); 

    element.style.left = w_center; 
</script> 

Я пытался использовать «String()» функция для преобразования «w_center» в строке, но по-прежнему не работает

есть ли другой способ, которым я мог бы используйте переменную как мое значение, используя код ниже?

element.style.left = w_center; 

да я могу сделать JQuery путь как $ ("# элемент"). CSS ("влево", w_center) он работает, но я хочу использовать JavaScript.

С уважением.

+0

что вы пытаетесь сделать здесь, братан? – messerbill

+2

element.style.left = String (math.round (w_center)) + "px"; –

ответ

0

Просто добавьте +"px" в конец номера и преобразуется в строку.

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
<style> 
 
#element { 
 
    width: 10px; 
 
    height: 10px; 
 
    position: relative; 
 
    background-color:red;/* I added this for visual reasons */ 
 
} 
 
</style> 
 
</head> 
 

 
<body> 
 
    <div id="element"></div> 
 
<script> 
 
    var w = window.innerWidth; 
 
    var h = window.innerHeight; 
 
    var w_center = w/2; 
 
    var h_center = h/2; 
 
    var element = document.getElementById("element"); 
 
    element.style.left = w_center+"px"; 
 
</script> 
 
</body> 
 
</html>

+0

Спасибо Ultimater! это было так просто :) –