Hope you found the part 1 helpful..
Okay, let’s begin…
Styling
- style property
- to access a specific style property e.g. border-width, use selection.style.borderWidth or for background-color backgroundColor.
- getProperty, setProperty, removeProperty methods
- get – takes in only one argument; returns the value of that property e.g. selection.getProperty(“background-color”)
- set – updates the value of a specific property; two arguments – property and value e.g. selection.setProperty(“background-color”, “red”)
- remove – well, removes hehe..
- The (2) methods apparently do not work for inline css <p style=”background-color:’red'”>Me</p>; solutions
- style.cssText
- This is my fav, mainly because you can set multiple CSS properties in a string
- setAttribute with “style” as the first argument and the set css properties as the second
See the Pen DOM Manipulation: Styling by Ajala Comfort (@AJALACOMFORT) on CodePen.
Next DOM Events
if you want to listen to a user pressing a button, or hovering / pointer over a link, using DOM events should be learned. There are two ways you can listen to events (e.g. clicking) according the book
-
addEventListener("click", function(){})
- the method pattern
-
button.onClick = function(){}
- property event handler pattern
-
<button onclick="console.log('i just got clicked')">Click Me</button>
- inline attribute event handler pattern
click is not the only event type. Below is a short list of the event types available, there are more listed in the book. I just found this list useful personally.
- For User Interface
- load – when files are loaded e.g. css, image, html page etc
- unload – when files are removed
- resize – fired when the document view is being resized
- scroll – when user scrolls the document in view
- context – when user right clicks
- For Focusing
- blur – when element loses focus either by mouse or tapping(mobile)
- focus – when elements gets in focus
- For Forms
- change – when a control loses the input focus and the input value has been modified
- reset – when form resets
- submit – when form is submitted
- select – when user select some text in the input field
- For Mouse
- click – you know this
- dbclick – when you double click
- mousedown – when the mouse pointer is pressed over an element
- mouseenter – when the mouse pointer enters the boundries of the element or its descendant element / children
- mouseleave – similar to mouseenter but when the mouse pointer leaves
If after a button is clicked and your click function is called, how does one prevent the function from being called again if a user clicks again ?
removeEventListener
Due to time I will not treat other aspects like Event.preventDefault() or even Event.stopPropagation() /*look them up; could be of use*/
If you have any questions, do comment down below.
See the Pen DOM Manipulation : DOM Events by Ajala Comfort (@AJALACOMFORT) on CodePen.