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

This article is about how to use the offsetParent () method. The editor thinks it is very practical, so share it with you as a reference and follow the editor to have a look.

The offsetParent () method returns the nearest ancestor location element. A positioning element refers to an element whose CSSposition attribute is set to relative, absolute, or fixed. You can set position through jQuery, or through the position property of CSS.

OffsetParent () instance

Sets the background color of the nearest ancestor location element:

$("button") .click (function () {

$("p") .offsetParent () .css ("background-color", "red")

})

Grammar.

(selector) .offsetParent ()

In-depth understanding of locating parent offsetParent and offset size

Offset (offsetdimension) is an important concept in javascript. The offsets are mainly related to four attributes: offsetLeft, offsetTop, offsetHeight and offsetWidth. Of course, there is also an offset reference-- locating the parent offsetParent. This article will introduce this part in detail.

Locate the parent

Before you understand the offset size, you must first understand offsetParent. People do not translate offsetParent into offsetting parents, but to locate parents, largely because offsetParent is related to location.

Positioning parent offsetParent is defined as the parent element closest to the current element that has been positioned (position is not equal to static). It is mainly divided into the following cases

The element itself has a fixed location, and the result of offsetParent is null

When the element itself has fixed fixed positioning, we know that the fixed positioning element is positioned relative to the viewport, and the parent is not positioned. The result of offsetParent is null.

[note] there is a compatibility problem with firefox browser

/ / firefox does not consider the problem of fixed positioning. If it is returned, other browsers will return null.

Console.log (test.offsetParent)

Thank you for reading! This is the end of the article on "how to use the offsetParent () method". I hope the above content can be of some help to you, so that you can learn more knowledge. if you think the article is good, you can share it for more people to see!

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.