Study Notes Seven DOM

DOM manipulation of CSS

Read and modify inline styles

1. Use the style attribute to manipulate the inline style of an element

	- Read inline styles:
		Syntax: element.style.style name
		- example:
			element.style.width
			element.style.height
			- Note: if the style name has-,you need to change the style name to camel case
				Will-remove, then-capitalize the letter after
			- for example: background-color --> backgroundColor
					border-width ---> borderWidth
  1. Modified with style is inline and has higher priority
    If written in the style! important styles modified in js cannot take effect
  2. If you use style to read inline styles, you can't read css. If you don't set style first, you can't read them.

2. Get the current style of the element with px

	- normal browser
		- use getComputedStyle()
		- This method is window The method of the object can return an object, which saves the effective style of the current element
		- parameter:
			1.element to get style
			2.You can pass a pseudo-element, generally pass null
		- example:
			Get the width of an element
				getComputedStyle(box , null)["width"];
                getComputedStyle(box , null).width;
		- The styles read through this method are read-only and cannot be modified

	- IE8
		- use currentStyle
		- grammar:
			element.currentStyle.style name
		- example:
			box.currentStyle["width"]
            box.currentStyle.width
		- The style read through this property is read-only and cannot be modified

Set up a function so that both can be used

    // obj: element to get name: style value to get
    function getStyle(obj, name) {
        // Returns true with this object, returns false without undefine d
        // If you don't write window to search globally, the variable cannot be found and an error will be reported
        // If the property is not found undefined
        if (window.getComputedStyle) {
            // When the property of the object is a variable, use []
            return getComputedStyle(obj, null)[name];
        }
        else {
            return obj.currentStyle[name];
        }
    }

The actual parameter is set to name when the parameter is passed getStyle(obj, "name");
or return (window.getComputedStyle) ? getComputedStyle(obj, null)[name] : obj.currentStyle[name];

3. Other ways to get elements

The following properties without px are read only

clientHeight
- The visible height of the element, which refers to the height of the element's content area and padding
- does not include border
clientWidth
- The visible width of the element, which refers to the width of the element's content area and padding
- does not include border
offsetHeight
- height of the entire element, including content area, padding, borders
offfsetWidth
- the width of the entire element, including content area, padding, borders
offsetParent
- the positioned parent of the current element
- The nearest ancestor element with positioning turned on, if all elements do not have positioning turned on, return body
offsetLeft
offsetTop
- the offset between the current element and the positioned parent element
- offsetLeft horizontal offset offsetTop vertical offset
scrollHeight
scrollWidth
- Get the height and width of the scroll area of ​​the element
scrollTop
scrollLeft
- Get the distance the element is scrolled vertically and horizontally
Determine whether the scroll bar scrolls to the end
- Vertical scroll bar
scrollHeight - scrollTop = clientHeight
- Horizontal scroll
scrollWidth - scrollLeft = clientWidth
maybe need parseInt

Scroll to the bottom to click
event:
onscroll Click or scroll the scroll bar

onmousemove when the mouse moves within the element

clientX returns the horizontal coordinates of the mouse pointer relative to the current window when the mouse event is triggered.
clientY returns the vertical coordinate of the mouse pointer relative to the current window when the mouse event is triggered.
pageX pageY The horizontal coordinate of the mouse pointer relative to the entire web page. Scrollbar does not affect

To solve the scrollbar problem:

  1. Change client to page
  2. plus scrollTop
    var t = document.documentElement.scrollTop||document.body.scrollTop;

The default parent element of the scroll bar is different in different browsers

bubbling of events

- The bubbling of events refers to the upward transmission of events. When an event on a descendant element is triggered, the same event on its ancestor element will also be triggered.
- The bubbling of events is beneficial in most cases, if you need to cancel the bubbling, you need to use the event object to cancel
- event object's cancelBubble Set as true,to cancel bubbling
				element.event = function(event){
					event = event || window.event;
					event.cancelBubble = true;
				};

Tags: Javascript css

Posted by Duje_KH on Thu, 19 May 2022 03:17:02 +0300