Hope you found the part 1 helpful..

Okay, let’s begin…

Styling

  1. style property
    1. to access a specific style property e.g. border-width, use selection.style.borderWidth or for background-color backgroundColor.
  2. getProperty, setProperty, removeProperty methods
    1. get – takes in only one argument; returns the value of that property e.g. selection.getProperty(“background-color”)
    2. set – updates the value of a specific property; two arguments – property and value e.g. selection.setProperty(“background-color”, “red”)
    3. remove – well, removes hehe..
  3. The (2) methods apparently do not work for inline css <p style=”background-color:’red'”>Me</p>; solutions
    1. style.cssText
      1. This is my fav, mainly because you can set multiple CSS properties in a string
    2. 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

  1. addEventListener("click", function(){})
    1. the method pattern
  2. button.onClick = function(){}
    1. property event handler pattern
  3. <button onclick="console.log('i just got clicked')">Click Me</button>
    1. 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.

  1. For User Interface
    1. load – when files are loaded e.g. css, image, html page etc
    2. unload – when files are removed
    3. resize – fired when the document view is being resized
    4. scroll – when user scrolls the document in view
    5. context – when user right clicks
  2. For Focusing
    1. blur – when element loses focus either by mouse or tapping(mobile)
    2. focus – when elements gets in focus
  3. For Forms
    1. change – when a control loses the input focus and the input value has been modified
    2. reset – when form resets
    3. submit – when form is submitted
    4. select – when user select some text in the input field
  4. For Mouse
    1. click – you know this
    2. dbclick – when you double click
    3. mousedown – when the mouse pointer is pressed over an element
    4. mouseenter – when the mouse pointer enters the boundries of the element or its descendant element / children
    5. 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.

 

These might interest you: