Use DOM to manipulate CSS

Modify the style of an element with JS:

  • Syntax: element.style.style name = style value
  • Note: If the CSS style name contains -, this name is not valid in JS such as background-color, you need to change the style name to camel name. Get rid of the – and capitalize the minus sign
  • Styles set via the style property are inline styles, and inline styles have higher priority, so styles modified via JS tend to be displayed immediately
  • But if the style is looking for that write up! Important, then the style will have the highest priority, even through JS also cannot override the style, this will result in JS modification style invalid, so try not to add style! important

Reads the style of the element

  • Syntax: element.style.style name
  • All styles set and read through the style property are inline styles and cannot be read from the style sheet

Gets the currently displayed style of the element

  • Syntax: element. CurrentStyle. Style name
  • You can read the style that the current element is displaying
  • Gets its default value if the style is not set for the current element
  • CurrentStyle is only supported by Internet Explorer, not other browsers

getComputedStyle

  • In other browsers you can use the getComputedStyle() method to get the style of the element, which is the Window method
    • You need two parameters
      • First: The element to get the style
      • Second: you can pass an element, usually null
    • This method returns an object that encapsulates the style of the current element
    • You can read the style by object, style name
    • If the style you get is not set, you get the true value, not the default value
    • For example, if width is not set, he will not get auto instead of a length
    • However, this method does not support Internet Explorer 8 and below

The styles read through currentStyle and getComputedStyle() are read-only and cannot be modified, except through the Style attribute

getStyle

  • Defines a function to get the current style of the specified element
  • Parameters:
    • Obj needs to get the elements of the style
    • Name Name of the style to be obtained

ClienWidth and clienHeight

  • These two attributes get the visible width and height of the element
  • These attributes do not contain px and return a number that can be computed directly
  • Gets the width and height of the element, including the content area and inner margins
  • These properties are read-only and cannot be changed

OffsetHeight and offsetWitdh

  • Gets the entire width and height of the element, including the content area, inner margins, and borders

offsetParent

  • Can be used to get the location parent of the current element
  • The ancestor element closest to the current element with location enabled is retrieved
  • If positioning is not enabled for all ancestor elements, the body is returned

The offsetLeft and offsetTop

  • offsetLeft()
  • The horizontal offset of the current element relative to its positioned parent
  • offsetTop()
  • The vertical offset of the current element with respect to its positioned parent

ScrollHeight, scrollLeft, scrollTop, scrollWidth

  • scrollHeight
  • Gets the height of the element’s entire scroll area
  • scrollLeft
  • Gets how far the horizontal scroll bar scrolls
  • scrollTop
  • Gets how far the vertical scroll bar scrolls
  • scrollWidth
  • Gets the width of the element’s entire scroll area

When scrollHeight -scrollTop == clientHeight is met

It means the vertical scroll bar has been scrolled to the bottom

When scrollWidth -scrollLeft == clientWidth is met

That means the horizontal scroll bar has reached the end

onscroll

  • Change time is triggered when the element’s scroll bar is scrolling

The Disable attribute sets whether or not an element is disabled

If set to true, the element is disabled and if set to false, the element is available