Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript

Posted by Kristian Woods
Kristian Woods
23,414 Points

What does it mean when you set a css property, using javascript, to an empty string?

So, I have a div. I set the height of the div to 960px in my CSS. I then create two functions in javascript, and attach the two functions to two separate buttons. One button collapses the height of the div, while the other, gives the div a height of 960px (its original height)

<body>
    <div class="block_div"></div>
    <button onclick="slideOut();">slideOut</button>
    <button onclick="slideIn();">slideIn</button>
    <script src="js.js"></script>
</body>

.block_div {
    height: 300px;
    width: 960px;
    background-color: orangered;
}

The JS below confuses me - I thought that this code would display the div at its original height of 960px - instead, it ADDED 960px to on top of the original height of 960px (doubling the height)....why? I thought by calling the slideOut function, it would set the height to 0px. Then when you called slideIn function, it would add the height back.

let outer = document.querySelector('.outer_div');
let block = document.querySelector('.block_div');

function slideOut() {
   document.querySelector('.block_div').style.transition = 'all .4s';
   block.style.height = '0px';
}

function slideIn() {
   document.querySelector('.block_div').style.transition = 'all .4s';
   block.style.height = '960px';
}

I then changed my code to this:

This code works. The div doesn't go beyond the original height of 960px. I set the height property to an empty string. Can someone explain what is happening?

let outer = document.querySelector('.outer_div');
let block = document.querySelector('.block_div');

function slideOut() {
   document.querySelector('.block_div').style.transition = 'all .4s';
   block.style.height = '0px';
}

function slideIn() {
   document.querySelector('.block_div').style.transition = 'all .4s';
   block.style.height = '';
}

Thanks

Kristian Woods
Kristian Woods
23,414 Points

just noticed that my width is 300px... my bad. However, could someone please shed light on why setting the property to an empty string worked too?

Thanks

1 Answer

Steven Parker
Steven Parker
242,191 Points
Steven Parker
Steven Parker
242,191 Points

You'll notice that unlike setting it to '960px', when you set it to an empty string it expands only to 300px. That's because the empty string simply removes the override and allows the original CSS setting to take effect again. You could also set it to "null" to do the same thing.