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

Question

I'm trying to change the background colour of a div element when the page window height is lower than a certain value using JavaScript. I have a vague idea of how this might work but it doesn't seem to be having any effect. This is within a tag and loads after the body of my HTML.

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

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

Answer 1

Like already mentioned getElementsByClassName returns an array. You had a typo there so nothing was returned, however.

As long as there's only 1 element with the class name "footer" this should work (might be better to use an ID):

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

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

But yeah, you should really look at the dev console when you're writing Javascript. It can save a lot of headaches!

Answer 2

JavaScript does not have a method called getElementByClassName .

The closest thing is getElementsByClassName which returns an HTMLCollection which is an array-like object, so to get the first element in the list you have use an index:

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

You can also use querySelector to get the first element with the class name:

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

Here is a working example:

 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 Demo http://jsfiddle.net/moogs/x63rc6v4/1/