1 / 11

Regularly scheduled events and JS+CSS

Learn how to modify CSS styles in a document using Javascript. Discover how to alter the style for a specific element, change classes, and use timeouts and intervals for dynamic modifications. Get ready to add animations to your webpages!

lister
Télécharger la présentation

Regularly scheduled events and JS+CSS

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Regularly scheduled events and JS+CSS Things are gonna get animated

  2. But first… • Any questions on your current homework assignment?

  3. Today • How to use Javascript to modify the CSS styles in a document • How to get a function to be called on a regular basis or after a delay

  4. Modifying CSS in Javascript • Javascript gives us the ability to modify CSS as we're looking at the webpage • Two methods we'll talk about today: • Changing the style for a single, specific element • Changing the classes associated with a single, specific element

  5. HTMLElement.style • For any HTMLElement, we can modify the "style" attribute to adjust the CSS styles • HTMLElement.style.setProperty("background-color", "#03ba12"); • HTMLElement.style.getPropertyValue("margin-left"); • HTMLElement.style.removeProperty("line-height"); • HTMLElement.style.borderBottomWidth = "12px";

  6. Aside: the transition property • The transition property allows us to specify how properties behave when they are changed • We can use this to make things like background colors change smoothly • Syntax: • transition: property duration • Property is any css property, or "all" (no quotes) • Duration is a number of seconds or milliseconds such as 1s, .5s, 150ms, etc. • Let's try this out…

  7. HTMLElement.classList • The classList attribute allows us to modify the list of CSS classes associated with a given element • Remember, each element can belong to multiple CSS classes • HTMLElement.classList.add("funClass"); • HTMLElement.classList.remove("boringClass"); • HTMLElement.classList.toggle("somethingElse"); • HTMLElement.classList.contains("emph");

  8. Timeouts and Intervals • Timeouts and intervals are two ways that we can arrange to have a function called in the future • Timeout: call a specified function once at a certain point in the future • Interval: call a specified function repeatedly after a delay given in milliseconds

  9. Timeouts • setTimeout(func, delay) or setTimeout(func) • Calls the function "func" after delay milliseconds, or zero ms if using the second form • The function will not be run immediately, but will instead run as soon as it can after the timer expires • The return value can later be passed to clearTimeout() to cancel the timeout from happening • Let's see an example and then use setTimeout along with a classList for some fun…

  10. Intervals • setInterval(func, delay) • Will call the function "func" every delayms • The return value can later be passed to clearInterval to cancel the recurring function call • We can setInterval to do some amusing things…

More Related