Shulou(Shulou.com)06/02 Report--

Editor to share with you what JavaScript commonly used web page special effects are, I hope you will gain something after reading this article, let's discuss it together!

1 element offset offset Series 1.1 offset Overview

The meaning of offset: offset means offset, and the location, size, and so on of the element can be dynamically obtained using the relevant attributes of offset.

The attribute indicates that the offsetLeft returns the offset of the element relative to the left border of its positioned parent element offsetTop returns the element's own width (including the width of the padding, border, and content area) relative to the offset parent offsetWidth above the positioned element. Note that the returned value offsetHeight returns its own height (including the height of padding, border, and content area) without units. Note that the offsetParent returns a value without a unit (returns a parent element with a positioning element as the element (or body if none of the parents have a location)

Get mouse position: schematic analysis of the coordinate position of the mouse pointer in the box.

Example: write a box, output the width and height of the box at the terminal, get and output the coordinates of the mouse pointer in the box

Var box = document.querySelector ('# box') / / 1. Output the width and height of box console.log ("width:", box.offsetWidth); console.log ("height:", box.offsetHeight); / / 2. Bind the mouse movement event box.addEventListener to box ('mousemove', function (e) {/ / 2.1get the offset of box var left = box.offsetLeft; var top = box.offsetTop; console.log ("offset: (" + left + "," + top + ")")) / / 2.2 calculate the coordinates of the mouse pointer in box var x = e.pageX-left; var y = e.pageY-top; console.log ("x axis coordinates:" + x + ", y axis coordinates:" + y);})

Each time the mouse is moved in the box, the terminal will output the corresponding coordinates.

1.2 the difference between offset and style offsetstyleoffset can get the style value in any stylesheet style can only get the style value in the line stylesheet the value obtained by the offset series is the unitless style.width, the string offsetWidth contains the value of padding, border, width style.width gets the value offsetWidth that does not contain padding, border and other properties are read-only attributes, and can only get values that cannot be assigned style.width is a read-write attribute Can get or assign 2-element visual area client series

Client series: client means client in Chinese, and information about the visual area of the element can be obtained by using the relevant attributes of the client series.

Property description clientLeft returns the size of the left border of the element clientTop returns the size of the border on the element clientWidth returns its own width (including padding), and the width of the content area (without borders). Note that the returned value does not take units clientHeight returns its own height (including padding), the height of the content area (without borders). Note that the returned value has no units.

Example: the size of the left border on the output element, as well as its own width and height

Div {width: 100px; height: 100px; background-color: aqua; border: 3px solid yellow;} / / get the div element let div = document.querySelector ("div"); / / output the size console.log of the left and upper borders of the element ("size of the left border:", div.clientLeft) Console.log ("size of the top border:", div.clientTop); / / output the width and height of the element itself (without borders) console.log ("width is:", div.clientWidth); console.log ("height is:", div.clientHeight)

3 element rolling scroll series

The meaning of scroll: scroll means scrolling, and the scrolling distance and size of the element can be dynamically obtained by using the relevant attributes of the scroll series.

The attribute indicates that scrollLeft returns the left distance to be scrolled, scrollTop returns the upper distance without unit, and scrollWidth returns its own width without unit, without border. Note that the returned value scrollHeight returns its own height without a unit, without a border. Note that the returned value has no units.

Example: get its own height and width, and get the height rolled up by div

I am the content. I am the content.

Click to get the height and width rolled up div {width: 200px; height: 100px; background-color: pink; / * scroll the elements that cannot be put down to display * / overflow: scroll;} / / 1, get the elements div and button let div = document.querySelector ("div") in the page Let button = document.querySelector ("button"); / / 2, the height and width of the output itself console.log ("height is:", div.scrollHeight); console.log ("width is:", div.scrollWidth) / / register the click click event for the button, and output the rolled-up height and width button.addEventListener ("click", function () {console.log ("rolled-up height:", div.scrollTop); console.log ("rolled-up width:", div.scrollLeft);})

After reading this article, I believe you have a certain understanding of "what are the special effects of JavaScript common web pages". If you want to know more about it, you are welcome to follow the industry information channel. Thank you for reading!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.