gpt4 book ai didi

javascript - 尝试将样式设置为屏幕高度和宽度 CSS

转载 作者:行者123 更新时间:2023-11-28 05:48:29 26 4
gpt4 key购买 nike

我想做的是获取屏幕的高度和屏幕的宽度,然后使用 document.getElement.style.property = newStyle 将样式更改为获取的屏幕高度和屏幕宽度屏幕。我尝试将高度和宽度制作成字符串来使用,我也尝试只放入值。我想知道如何放入 px 值和 % 值。谢谢。

<!DOCTYPE html>
<html lang = "en/US">
<head>
<title>
cyclebg test

</title>
<style>
body {
background: url("http://i.dailymail.co.uk/i/pix/2016/03/22/13/32738A6E00000578-3504412-image-a-6_1458654517341.jpg")
no-repeat;
background-position: center top;
background-size: 200px 100px;

}

p {
padding: 50px; background-color: green; margin-left: -1%; margin-right: -1%; display: block;


}


</style>
</head>


<body>

<p style = "margin-top: 25%;"> Hello World </p>

<p> Yo </p>
</body>


<script>

var heightOfScreen = screen.height;
var widthOfScreen = screen.width;
var heightOfScreenString = heightOfScreen + " px";
var widthOfScreenString = widthOfScreen + " px";
document.getElementsByTagName("body")[0].style.backgroundSize = "heightOfScreenString widthOfScreenString";
</script>


</html>

最佳答案

你应该尝试使用

background-size: cover;

因此背景将覆盖整个背景并裁掉多余部分。如果你想显示完整的背景(尽管顶部或侧面有空白)你可以使用“包含”来代替

https://jsfiddle.net/0vps9x0s/

关于javascript - 尝试将样式设置为屏幕高度和宽度 CSS,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37473842/

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