gpt4 book ai didi

带有变量的javascript样式

转载 作者:行者123 更新时间:2023-11-28 06:45:47 30 4
gpt4 key购买 nike

我不知道如何使用 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").css("left", w_center) 这样的 jQuery 方式工作,但我想使用 javascript。

问候。

最佳答案

只需在数字末尾添加+"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样式,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34057064/

30 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com