JS essay, CSS and JS prohibit page selection text, table's class style makes the TD Class style invalid, jquery get the element coordinates

CSS use User-select,user-select is not a standard, browser support is not complete; User-select has two values, none user can not select text, text user can select

body{
-moz-user-select:none; /* Firefox */
-webkit-user-select:none; /*webkit Browser */
-ms-user-select:none; /*ie10*/
-khtml-user-select:none; /* Early Browser */
User-select:none;
}

You can also use JS control

Document.body.onselectstart = Document.body.ondrag = function () {
return false;
}

The class in the TD is affected by the class contained in the table, making it ineffective, such as:

. ptable td{
    background-color:red;
}
. ptd{
    Background-color:blue;
}

<table class= "PTable" >
    <tr>
        <TD class= "PTd" >asdfs</td>
    </tr>
</table>

In this case, the PTD will not work and need to be added to the!important.

. ptd{
    Background-color:blue!important

;
}

jquery Gets the element coordinates

first, obtain the coordinates

1.offset ()

The offset () method returns or sets the offset (position) of the matching element relative to the document. (i.e. viewport coordinates)

The object returned by this method contains two integer properties: Top and left, in pixels.

This method is valid only for visible elements.

2.position ()

The position () method returns the position (offset) of the matching element relative to the parent element. (relative to the parent element's document coordinates)

The object returned by this method contains two integer properties: Top and left, in pixels.

This method is valid only for visible elements.

3.offsetParent ()

The OffsetParent () method returns the nearest ancestor anchor element.

The anchor element refers to the element's CSS position property that is set to relative, absolute, or fixed elements.

You can set position through JQuery, or through the position property of CSS.

second, to obtain the size

1.width () and height () methods

The width () method sets or returns the widths of elements (excluding padding, borders, or margins).

The height () method sets or returns the heights of the elements (excluding padding, borders, or margins).

2.innerWidth () and Innerheight () methods

The Innerwidth () method returns the width of the element, including the padding.

The Innerheight () method returns the height of the element, including the padding.

3.outerWidth () and Outerheight () methods

The Outerwidth () method returns the width of the element (including padding and borders).

The Outerheight () method returns the height of the element, including padding and borders.

The Outerwidth (True) method returns the width of the element (including padding, borders, and margins).

The Outerheight (True) method returns the height of the element (including padding, borders, and margins).

JS essay, CSS and JS prohibit page selection text, table's class style makes the TD Class style invalid, jquery get the element coordinates