Question

我正在尝试使用JavaScript在页面窗口高度低于某个值时更改div元素的背景颜色。我对这可能如何起作用有一个模糊的想法，但它似乎没有任何影响。这是在标记内，并在我的HTML正文后加载。

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

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

Answer 1

就像已经提到的那样getElementsByClassName返回一个数组。你有一个错字，所以没有任何回报。

只要只有一个带有类名称“footer”的元素，这应该可行（使用ID可能更好）：

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

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

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

Answer 2

JavaScript没有名为getElementByClassName的方法。

最接近的是getElementsByClassName，它返回一个HTMLCollection，它是一个类似数组的对象，所以要获得列表中的第一个元素，你需要使用索引：

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

您还可以使用querySelector获取具有类名的第一个元素：

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

这是一个有效的例子：

＆＃13;

var footer = document.getElementsByClassName('footer')[0];

window.onresize = function (event) {
    if (window.innerHeight < 800) {
        footer.style.backgroundColor = 'black';
    } else {
        footer.style.backgroundColor = 'blue';
    }
}

＆＃13;

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

＆＃13;

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

＆＃13;

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

使用JavaScript更改窗口高度的元素样式

2 个答案: