Change CSS properties via JavaScript

Question

I need to modify some CSS properties via JavaScript. The website I need to work with is based on a CMS and I can only edit body elements to inject code.

I was wondering if there was a way to use JavaScript to modify/override the CSS on-the-fly as the page loads?

At the present time I am looking to modify two properties (but maybe more in the future):

background-image:url(http://mysite.com/img/bg.jpg);
background-attachment: scroll;

I would like them to be changed to the following on the specific page I intend to embed this script on:

background-image:url(http://mysite.com/img/new_bg.jpg);
background-attachment: fixed;

I tried this, but it did not work (remember I can only put this within the body of the page):

<script type="text/javascript">
    document.getElementById("body").style.backgroundImage = 'url(http://mysite.com/img/new_bg.jpg)';
</script>

Any ideas? Thanks.

I want to do this with pure JavaScript. The link you shared is using JQuery. — Bones
– Bones, Commented Sep 9, 2013 at 3:47

SLaks · Accepted Answer · 2013-09-09 02:39:04Z

5

document.getElementById takes an element ID.

Unless you have an element with id="body", your code won't find any element.

You probably want document.body, which always returns the one and only <body> element.

answered Sep 9, 2013 at 2:39

SLaks

891k182 gold badges1.9k silver badges2k bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Change CSS properties via JavaScript

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related