Updating CSS properties using JavaScript

You can access the CSS properties of any element using Style object.

<element>.style

You can access below properties through style object.

Background properties of an element

Background related properties allow you to change the background of an element.

Here is the list of background related properties.

  1. backgroundColor – This is used to set or get the background color.
  2. backgroundImage – This is used to set or get the background image.
  3. backgroundPosition – This is used to specify the position of the background image.
  4. backgroundRepeat – This is used to specify if you want to repeat the background image so that entire background is occupied.
  5. backgroundAttachment
  6. backgroundClip
  7. backgroundOrigin
  8. backgroundSize
  9. background – You can use this property to set all background properties at the same time.

Style properties related to size and position

position property allows you to specify the position (absolute or relative ) of an element.

height and width properties allow you to specify the size of an element. maxHeight, maxWidth, minHeight, minWidth properties allow to set the maximum and minimum size values.

top, bottom, left, right properties allow you to position the element with respect to the offset from 4 sides of the screen.

Style properties related to margin and padding.

You must know below box model before working with margin, border and padding. Note that actual content goes in the innermost box.

box-model

box-model

Here is the list of margin related properties.

  1. marginTop
  2. marginBottom
  3. marginLeft
  4. marginRight
  5. margin

Here is the list of padding related properties.

  1. paddingTop
  2. paddingBottom
  3. paddingLeft
  4. paddingRight
  5. padding

Border properties of the element

We can use below properties to set the value for all borders at the same time.

  1. borderColor – This is used to change color of all borders.
  2. borderStyle – This is used to change line style of all borders.
  3. borderWidth – This is used to change width of all borders.

We can also specify different values for each border (Top, Bottom, Left, Right).

  1. borderTopColor – This is used to change color of top border only.
  2. borderTopStyle – This is used to change line style of top border only.
  3. borderTopWidth – This is used to change width of top border only.

If you want to specify all properties at the same time for each border, you can use below properties.

  1. borderTop – This is used to specify the color, style and width of top border.
  2. borderBottom – This is used to specify the color, style and width of bottom border.
  3. borderLeft – This is used to specify the color, style and width of left border.
  4. borderRight – This is used to specify the color, style and width of right border.

border property allows you to specify all properties for all borders at the same time.

We also have additional border properties as mentioned below.

  1. borderRadius  – This property allows you to specify the radius for corners.
  2. borderSpacing
  3. borderCollapse
  4. borderImage – This is used to specify the image in the border.
  5. borderImageOutset
  6. borderImageRepeat
  7. borderImageSlice
  8. borderImageSource
  9. borderImageWidth

Mouse cursor property

cursor property allows you to change the cursor type.

Style properties related to visibility

You can use below properties to manage the visibility of the element.

  1. visibility
  2. display
  3. opacity

Hiding element

If you want to hide an element, you can set the visibility property to “hidden”.  Note that event though element is hidden, it occupies the space. Events are not triggered when the element is hidden. If you want element not to occupy the space, you can set the display property as “none”.

<element>.style.visibility=’hidden’

<element>.style.display=’none’

To hide an element, you can also set the opacity property to 0. In this case, element will occupy space. Main difference is that events will be triggered on element with opacity as 0.

<span onclick=”console.log(‘visibility hidden – click event does not work’)” style=”visibility:hidden”> hi </span>
<span onclick=”console.log(‘opacity – click event works’)” style=”opacity:0″> hello </span>

Showing an element

To show an element, you can use any of the below line of code.

<element>.style.visibility=’visible’

<element>.style.display=’unset’

<element>.style.opacity=1

Alignment related style properties

Here is the list of alignment related properties.

  1. align
  2. verticalAlign
  3. textAlign
  4. textAlignLast
  5. alignContent
  6. alignItems
  7. alignSelf

zIndex Property

zIndex property allows you to put the elements in specific order. Suppose you want to show specific element on top of another element, then you can use this property. Element with higher zIndex is displayed on the top of all elements. Also note that this property only works on elements that have position property set to absolute or relative or fixed.

overflow related properties

overflow related properties allows you to control the situation wherein data in the element overflows the size of an element. For example – suppose you have one div element with height and width as 200×200 pixels. If you add lot of data in this element, there is a possibility that data may not fit in it. To control such situations, you can use overflow properties.

There are 3 properties.

  1. overflow – controls horizontal and vertical overflow
  2. overflowX – controls horizontal overflow
  3. overflowY – controls vertical overflow

Default value of overflow property is “visible”. It means that content will flow out of the container. If you do not want the content to overflow, you can set this property to “hidden”. The problem with “hidden” is that users will not be able to view the content if it overflows out of the container. To avoid this, you can set this property to “auto” or “scroll”. When you want to display  the horizantal and vertical scroll bars, you can set the property to “scroll”. If you set overflow property to “auto”, scroll bars will be added only when the content overflows giving better user experience.

Style properties related to list element

We have below list properties

  1. listStyleType – This property lets you specify style type like disc, circle, square, decimal, lower-alpha, lower-roman etc
  2. listStyleImage – This property lets you specify the image as a list item marker.
  3. listStylePosition – This property lets you specify where you want to position (inside or outside) the list item markers.

You can set all of the above properties using single property “listStyle”

Below line of code sets the listStyleImage property to an image.

<element>.style.listStyleImage=”url(‘yourImage.png’)”

Style properties related to font

font related properties allow you to specify the font for your element.

Here is the list of font related properties.

  1. fontFamily
  2. fontSize
  3. fontStyle
  4. fontVariant
  5. fontWeight
  6. fontSizeAdjust

All font property values can be specified at the same time using single property “font”.

 

Style properties related to text
Here is the list of text decoration related properties.

  1. textDecorationColor
  2. textDecorationLine
  3. textDecorationStyle

We can specify values for all decoration related properties at the same time using “textDecoration” property.

Here is the list of text related properties.

  1. textIndent – This property lets you specify the indentation for the text.
  2. textJustify – This property will justify the text.
  3. textOverflow – Don’t get confused this with overflow property. textOverflow property only allows you to specify how you want to indicate the overflowed content. Note that we can not add scroll bars.
  4. textShadow – This property lets you give shadow effect to the element.
  5. textTransform – We can convert the text to lowercase, uppercase using textTransform. We can also capitalize the text.

You may also like...