JavaScript的風格與可變

我想不通我怎麼可以用JavaScript style屬性style元素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>

我試圖用「字符串（）」功能轉換「w_center」字符串，但仍然無法正常工作

有沒有我可以任何其他方式使用下面的代碼使用變量作爲我的值？

element.style.left = w_center;

是的，我可以做jQuery的方式，比如$（「＃元素」）。CSS（「左」，w_center），它的工作原理，但我想使用JavaScript。

問候。

來源

2015-12-03 ha_ryu

什麼是你想在這裏做兄弟？ – messerbill

element.style.left = String（math.round（w_center））+「px」; –

只需將+"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>

來源

2015-12-03 03:13:00 Ultimater

謝謝Ultimater！這是簡單的:) –

JavaScript的風格與可變

回答

相關問題