Question

我无法弄清楚如何使用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;

是的我可以像$（“＃element”）那样执行jQuery .css（“left”，w_center）它可以工作，但我想使用javascript。

问候。

Answer 1

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

带有变量的javascript样式

1 个答案: