Set width of HTML elements in bookmarklet

Question

I like to use the messenger built into Outlook.com instead of having to install Skype just for messaging. In order to make the messenger take the whole width of the window (which I then place off to the side) I hack the width of two divs.

To automate it, I wrote this javascript snippet in Chrome's snippets tool and it works great:

document.getElementById("sidebar").style.width = "100%";
document.getElementsByClassName("RecentConversationsControl_Container")[0].style.width = "100%";

I tried to convert it into a bookmarklet:

javascript:document.getElementById("sidebar").style.width="100%";document.getElementsByClassName("RecentConversationsControl_Container")[0].style.width="100%";

But when I click the bookmark the page turns white and shows the text "100%" in the upper left. It's almost like it set innertext or something.

Does anyone know why my bookmarklet doesn't work the same as the snippet?

---

_{*Here's my working bookmarklet:}

javascript:(function(){document.getElementById("sidebar").style.width="100%";document.getElementsByClassName("RecentConversationsControl_Container")[0].style.width="100%";if(upsell=document.getElementsByClassName("Close c_nobdr t_prs")[0]){upsell.click()};var a=[].slice.call(document.getElementsByClassName("RecentConversationsControl_MessageText"));for(var i=0, length=a.length; i<length; i++){a[i].style.width="80%"};})()

Answer 1

best practice: javascript:(function(){/*your code*/})()

easiest: javascript:/*your code*/;void(0);