Removing CSS Borders with javascript in greasemonkey/tampermonkey for facebook

Question

I am trying to make a grease monkey script (well, tamper monkey actually) for Google Chrome to remove ads, suggestions, columns, and such on Facebook. I was able to modify some user scripts I found online to remove Facebook's Ads, and the right and left columns, but the thing I can not make leave, and is driving me crazy is the little gray lines on the edges and in between posts. Originally they were fine, but with the columns gone, they are kind of just floating randomly, particularly the right one. to remove it, I tried to use:

document.getElementById('mainContent').removeattribute('border-right');

It didn't work, neither did several hours worth of other things I tried. I went into Chrome, hit F12, and checked the resources page and found the stylesheet with the attribute in it, and it reads:

.hasLeftCol #mainContainer{border-right:1px solid #ccc;min-height:600px}

I can not make them go away, and I would appreciate assistance from anyone who can, thank you.

Answer 1

border-right is a style property, not an element attribute, so removeAttribute won't work. Instead try this:

document.getElementById("mainContainer").style.borderRight = "none";

(Note that border-right becomes borderRight for JavaScript, and make sure you spell names exactly.)

However you might prefer user stylesheets. Browser extensions such as Stylish let you write CSS that is applied automatically, instead of going through script. (You can hide things using display: none, or mute them with opacity: 0.5.)