.css()

.css() Method

  • Method that provides a quick way to apply the styles directly to the HTML elements (i.e. inline styles) that haven’t been or can’t easily be defined in a stylesheet

Example of Getting (Reading) a css property from an element

  • To Get (Read) css properties of an element use css(cssPropertyName) with nothing inside the parentheses
$(() => {
  $("#readBorderProperties").click(() => {
   // read "border" css properties of box
   const borderProperties = $(".box").css("border")
   alert(borderProperties)
  })
})

JS Bin on jsbin.com

Example of Setting (writing) css properties on an element

  • To Set (Write) text of an element use css({cssPropertyName: , cssPropertyValue }) with an object representing the new css properties inside the parentheses
$(() => {
  $("#setCssProperties").click(() => {
   // set new css properties on box
   $(".box").css({
     backgroundColor: "green",
     border: "3px dashed black",
     width: "200px"
   })
  })
})

JS Bin on jsbin.com