Question

我想在滚动

时更改div的高度

#H {
  position: fixed;
  height: 200px;
  background: red;
  width: 200px
}

<div style="height:2000px; position:relative">
  <div id="H"></div>
</div>


<script type="text/javascript">
  window.onscroll = function() {
    myFunction()
  };

  function myFunction() {
    VAR X = document.getElementById("H");
    if (document.body.scrollTop > 0 || document.documentElement.scrollTop > 0) {
      X.css("height": "100px");
    } else {
      X.css("height": "200px");
    }
  }
</script>

但代码无效。在上面的代码中，我尝试将div的高度从{200}滚动到id="H"，我已在CSS中提到100，但JS是没跑了。

Answer 1

您在JavaScript中遇到了一些问题。

将其更改为：

<script>
 window.onscroll = function() {myFunction()};

function myFunction() {
    var X=document.getElementById("H");
    if (document.body.scrollTop > 0 || document.documentElement.scrollTop > 0) {
        X.style.height = "1000px";
    } 
    else {
       X.style.height = "200px";
        }
    }

</script>

VAR X应为var X

并且

X.css("height":"1000px");更改样式X.style.height = "1000px";

<强> Working Fiddle

Answer 2

您的代码中存在一些JavaScript错误。

VAR X =文件...... “var”必须是小写，而不是大写。
X.css（...） “css”不是一个功能。请改用X.style.height。

一般来看如何调试javascript代码。一个好的浏览器是你的朋友（例如Firefox或Chrome）。使用console.log（“foo”）;将消息或变量打印到浏览器控制台以查看代码中发生的情况。您也可以使用逐步调试。

Answer 3

如果您在浏览器中使用JavaScript控制台，则可以看到document.getElementById（＆＃34; H＆＃34;）。css不是函数。

而是使用例如document.getElementById（＆＃34; H＆＃34;）。style.height =＆＃34; 300px＆＃34 ;;

Answer 4

除非您使用getComputedStyle API，否则无法在JavaScript中直接访问CSS，但只要您已经创建了相关的element.className，就可以使用class访问该类并进行更改。 / p>

element.style.property是您更改内联样式的方法。两者都有很大的不同，因为一个是DOM结构的一部分，而另一个是通过class名称和stylesheet连接到DOM。

具体到你的问题：

以下是fiddle

window.onscroll = function() {myFunction()};只是window.onscroll = myFunction它是相同的，更具惯用性。

使用javascript

4 个答案: