<!DOCTYPE HTML><HTMLLang= "en"><Head> <MetaCharSet= "UTF-8"> <title>Document</title> <styletype= "Text/css">. Box{width:200px;Height:200px;position:relative;Border:1px solid Black; }. Content{width:50px;Height:50px;background:Red;position:Absolute;Top:50px; Left:100px; } </style> <Scripttype= "Text/javascript"src= ' Jquery-3.2.1.min.js '></Script> <Scripttype= "Text/javascript"> $(function(){ var$content _height= $('. Content'). CSS ('Height'); //gets the height of the. Content element, with unit 50px var$height= $('. Content'). Height (); //gets the height of the. Content, without units var$width= $('. Content'). width (); //gets the width of the. Content, without units var$offset= $('. Content'). offset (); //gets the relative offset of the. Content element in the current window varTop=$offset. Top; //The value to the current window top var Left=$offset. Left; //to the current window left value var$position= $('. Content'). Position (); //Gets the relative offset value of the parent node of the element that is set to relative or absolute relative to the most recent position style property varPosition_top=$position. Top; // varPosition_left=$position. Left; varscrolltop= $('P'). scrolltop (); //gets the distance of the element's scrollbar from the top varscrollleft= $('P'). ScrollLeft (); //gets the distance of the element's scrollbar from the top $('. Content'). CSS ('background','Blue'); //set the background of the. Content element to be blue $('. Content'). css ({'background':'Blue','width':'80px'}); //set multiple style }); </Script></Head><Body> <Divclass= "box"> <Divclass= "Content"></Div> </Div></Body></HTML>
Jquery-css (), Height (), width (), offset (), position (), scrolltop (), ScrollLeft ()