1. Web Systems Development (CSC-215)
Lecture 18: Accessing CSS from JavaScript

2. Workshop on Virtual Reality
2:00pm in SLASS Auditorium
Attendance marked
Any work done during the workshop on your laptops should be shown later to be marked as assignment 12

3. Class Test 4 Monday 7th May
Lecture 16, 17, 18, 19 (please note that today’s lecture is included)
Lab question

4. Accessing CSS from JavaScript

5. getelementbyid

8. Helper functions to use getelementbyid

9. Basic version of helper function

10. Better version, to handle both id and object

11. To access style properties easily
Because O has been designed to accept either an id or an object, S can also handle access either by id or object.

12. Flexibility from helper functions, can access object directly or by id

16. Now possible to access any element, and any style property

17. Helper to Access all elements from a particular class

19. Get all myclass elements
For example
Get all myclass elements

20. Modify all retrieved elements

22. Using hyphenated properties e.g., font-size

29. Adding Elements

31. Add Remove Alternatives

32. Or InnerHTML

33. Interrupts
setTimeout
setInterval
clearTimeout
clearInterval

36. Canceling a Timeout

38. Cancel Interval

39. Example

43. Class Activity 1

44. Class Activity 2 Create a page with a div
When the div is clicked, text appears inside the div

45. Class Activity 3 Create a page with a div
When the div is clicked it disappears

46. Content adapted from chapter 26 of textbook.