我目前正在学习javascript，遇到了一个让我陷入困境的问题：
我有一个带有90% height和80% width的div
当滚动到全屏大小(需要占据整个显示器(时，我试图使此div增长(100% width，100% height(。
我试过循环，但似乎不起作用div的height和width似乎不会更改元素的样式。
有人知道怎么解决这个问题吗
我真的很期待你能给我的任何建议，以实现我的项目并从错误中吸取教训。
以下是我当前的代码：
$(document).ready(function(){
$(window).scroll(function(e){
var pos = $(window).scrollTop();
console.log("Scroll:" +pos);
var div = document.getElementsByClassName('home');
if(pos>300){
let h = 90 + (pos/150);
let w = 80 + 1 +(pos/50);
if(h>100){
h = 100;
}
if(w>100){
w = 100;
}
h = " " " + h + " %"";
w = " " " + w + " %"";
console.log(h);
document.getElementsByClassName('home').height = Math.round(h);
document.getElementsByClassName('home').width = Math.round(w);
}
});
});* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family:-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
background-color: #CBCACA;
}
.wrapper{
height: 100%;
width: 100%;
position: relative;
}
.home{
height: 90%;
width: 80%;
position: fixed;
top: 5%;
left: 10%;
border-radius: 50px;
background-color: #302D2D;
}
.supply{
height: 100vh;
width: 70%;
position: relative;
left: 15%;
margin-top: 100%;
background-color: crimson;
}<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Timo Roedler</title>
<meta name="description" content="small test with Scrolling">
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="wrapper">
<div class="headline">
</div>
<div class="main">
<div class="home">
</div>
<div class="supply">
<div class="supply1">
</div>
<div class="supply2">
</div>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="app.js"></script>
</body>
</html>非常努力。你只是有一些不正确的地方。
以元素为目标
现在，您有以下代码。
var div = document.getElementsByClassName('home');
在这种情况下，你试图针对你的"；家；元素，语法正确，但不会返回节点。.getElementsByClassName()返回一个类似数组的对象，这意味着您需要使用document.getElementsByClassName('home')[0]或div[0]来访问它。就我个人而言，我更喜欢使用document.querySelector()，但您也可以使用jQuery来获得您想要的元素。
应用样式
这是您的代码：
h = " " " + h + " %"";
document.getElementsByClassName('home').height = Math.round(h)
首先，JavaScript中字符串的性质允许您简单地使用h = h + '%'。此外，如果您需要在字符串中包含引号(您不在这里，但知道这一点可能很有用(，您可以将它们封装在单引号中：var message = 'the "name" field is required.'一旦您有了字符串，就不能再在其上使用Math.round()。Math.round()只接受一个数字。然而，在这种情况下，没有必要取整。可以使用未舍入的值，但不应将其应用于.height。该属性已经过时，最好指定给CSS样式的属性.style.height。
使元素居中
在您的代码中，您尝试分别使用顶部和左侧的5%和10%来偏移元素。当你改变高度时，你也必须改变这些，或者你可以使用变换来居中你的元素，比如：
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
总的来说，祝你努力学习JavaScript，好运连连。这是一门非常有趣的语言。下面我包含了一个带有这些更改的代码片段。希望这将有助于展示上述信息。
$(document).ready(function(){
$(window).scroll(function(e){
var pos = $(window).scrollTop();
//console.log("Scroll:" +pos);
var div = document.querySelector('.home');
if(pos>300){
let h = 90 + (pos/150);
let w = 80 + 1 +(pos/50);
if(h>100){
h = 100;
}
if(w>100){
w = 100;
}
h = h + "%";
w = w + "%";
//console.log(h);
document.querySelector('.home').style.height = h;
document.querySelector('.home').style.width = w;
}
});
});* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family:-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
background-color: #CBCACA;
}
.wrapper{
height: 100%;
width: 100%;
position: relative;
}
.home{
height: 90%;
width: 80%;
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
border-radius: 50px;
background-color: #302D2D;
}
.supply{
height: 100vh;
width: 70%;
position: relative;
left: 15%;
margin-top: 100%;
background-color: crimson;
}<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Timo Roedler</title>
<meta name="description" content="small test with Scrolling">
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="wrapper">
<div class="headline">
</div>
<div class="main">
<div class="home">
</div>
<div class="supply">
<div class="supply1">
</div>
<div class="supply2">
</div>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="app.js"></script>
</body>
</html>粗略地看，它可能与这些行有关
// You were trying to use Math.round on a string.
h = Math.round(h) + "%";
w = Math.round(w) + "%";
console.log(h);
// assign the percentage directly to the style
document.getElementsByClassName('home').style.height = h;
document.getElementsByClassName('home').style.width = w;