将元素样式更改为 window 高度 JavaScript

Question

我正在尝试使用 JavaScript 在页面 window 高度低于特定值时更改 div 元素的背景颜色。我对这可能如何工作有一个模糊的想法，但它似乎没有任何效果。这是在一个标签内，并在我的 HTML.

正文之后加载

<script>
var footer = document.getElementByClassName("footer");

if (window.innerHeight < 800) {
footer.style.backgroundColor = 'black';
}
</script>

Answer 1

就像已经提到的 getElementsByClassName returns 一个数组。您在那里输入错误，因此没有返回任何内容。

只要只有 1 个元素具有 class 名称 "footer" 这应该有效（使用 ID 可能更好）：

<script>
var footer = document.getElementsByClassName("footer")[0];

if (window.innerHeight < 800) {
    footer.style.backgroundColor = 'black';
}
</script>

但是，是的，您在编写 Javascript 时真的应该看看开发控制台。它可以省去很多麻烦！

Answer 2

JavaScript 没有名为 getElementByClassName 的方法。

最接近的是 getElementsByClassName，其中 returns 是一个 HTMLCollection，它是一个类似数组的对象，因此要获取列表中的第一个元素，您可以使用索引：

var footer = document.getElementsByClassName('footer')[0];

您还可以使用 querySelector 获取名称为 class 的第一个元素：

var footer = document.querySelector('.footer');

这是一个工作示例：

var footer = document.getElementsByClassName('footer')[0];

window.onresize = function (event) {
    if (window.innerHeight < 800) {
        footer.style.backgroundColor = 'black';
    } else {
        footer.style.backgroundColor = 'blue';
    }
}

.footer {
    height: 50px;
    width: 100%;
    background: black;
}

<footer class="footer"></footer>

JSFiddle 演示 http://jsfiddle.net/moogs/x63rc6v4/1/

将元素样式更改为 window 高度 JavaScript

Change Element style with window height with JavaScript

html

javascript

getelementsbyclassname