Developer: How to Change Inline Styles in JavaScript


show more Make certain parts of your web page stand out by changing inline styles dynamically with JavaScript. With just a few lines of code, you can manipulate content directly on your website. show less
please wait ...

Changing inline styles

So I'm going do something a bit more interesting to this page, using inline styles. Let's say we're trying to get people to sign up for our newsletter. The page itself is pretty normal. I do have a section of it that's been defined as a div with an ID of join, which is trying to get people to sign up for the monthly newsletter. Well, what I'm going to do is a little bit of JavaScript to make this stand out a bit more. I'm going to jump over into my JavaScript file. Let's get rid of the easy code.

Down at the bottom, I have a window.onload that's going to call a setTimeout function that passes in beginAnimate, 5000. That simply means do a single call to the beginAnimate function in five seconds after the page is loaded. What does that do? Well, up here in beginAnimate what I'm doing is I've got three lines that all grab that actual div, which currently is part of the body of the page. What I'm going to do is a couple of CSS style tricks.

I'm go...

Changing inline styles
Video duration: 3m 47s 5h 31m Beginner

Viewers:

Make certain parts of your web page stand out by changing inline styles dynamically with JavaScript. With just a few lines of code, you can manipulate content directly on your website.

Subjects:
Developer Web
Software:
JavaScript
Author:
please wait ...