M

E

N

U

 

 

css

css() возвращает, создает или изменяет CSS свойства или значения
height() возвращает, создает или изменяет высоту, единица измерения не указывается
width() возвращает, создает или изменяет ширину, единица измерения не указывается
innerHeight() возвращает высоту + внутренние отступы, единица измерения не указывается
innerWidth() возвращает ширину + внутренние отступы, единица измерения не указывается
outerHeight() возвращает высоту + внутренние отступы + толщину рамки;
возвращает высоту + внешние отступы + внутренние отступы + толщину рамки;
единица измерения не указывается
outerWidth() возвращает ширину + внутренние отступы + толщину рамки;
возвращает ширину + внешние отступы + внутренние отступы + толщину рамки;
единица измерения не указывается
offset() возвращает или устанавливает координаты верхнего левого угла элемента относительно верхнего левого угла страницы
position() возвращает координаты верхнего левого угла элемента относительно верхнего левого угла элемента
scrollTop() возвращает или задает значение вертикальной прокрутки
scrollLeft() возвращает или задает значение горизонтальной прокрутки
 
 

css()

Функция возвращает, создает или изменяет CSS свойства или значения.
Функция возвращает числовое значение с указанием единицы измерения, например px.
Скрыть

Показать

Копировать

Выполнить
  index.html  
<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8" />
 <title>New Страница</title>
 <!-- подключаем библиотеку онлайн через Google CDN -->
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
 <style>
  .a {
   width: 500px;
   background-color: #deeaf6;
   text-align: center;
  }
  .b {
   width: 500px;
   background-color: #7fffd4;
   text-align: center;
  }
 </style>
</head>
<body>
 <div id="d1" class="a"></div>
 <br />
 <div id="d2"></div>
 <br />
 <div id="d3" class="b">Hello World!</div>
 <script>
  $(document).ready(function () {
   /*возврат значения*/
   $('#d1').text('ширина блока = ' + $('#d1').css('width'));
 
   /*создание свойства и значения*/
   $('#d2').css({ 'height': '50px', 'width': '500px', 'background-color': '#ff9a4e' });
 
   /*изменение значения*/
   $('#d3').css({ 'text-align': 'right' });
  });
 </script>
</body>
</html>
 
 
 

height()

Функция возвращает, создает или изменяет высоту, единица измерения не указывается.
Скрыть

Показать

Копировать

Выполнить
  index.html  
<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8" />
 <title>New Страница</title>
 <!-- подключаем библиотеку онлайн через Google CDN -->
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
 <style>
  .a {
   height: 100px;
   width: 500px;
   background-color: #ff9a4e;
   margin: 10px;
   padding: 5px;
   text-align: center;
   line-height: 100px;
  }
 
  .b {
   height: 100px;
   width: 500px;
   background-color: #7fffd4;
   margin: 10px;
   padding: 5px;
   text-align: center;
  }
 </style>
</head>
<body>
 <div id="d1" class="a"></div>
 <div id="d2" class="b"></div>
 <script>
  $(document).ready(function () {
   /*возврат значения*/
   $('#d1').text('height = ' + $('#d1').height());
 
   /*установка или изменение значения*/
   $('#d2').height(150).css({ 'line-height': $('#d2').height() + 'px' }).text('height = ' + $('#d2').height());
  });
 </script>
</body>
</html>
 
 
 

width()

Функция возвращает, создает или изменяет ширину, единица измерения не указывается.
Скрыть

Показать

Копировать

Выполнить
  index.html  
<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8" />
 <title>New Страница</title>
 <!-- подключаем библиотеку онлайн через Google CDN -->
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
 <style>
  .a {
   height: 100px;
   width: 500px;
   background-color: #ff9a4e;
   margin: 10px;
   padding: 5px;
   text-align: center;
   line-height: 100px;
  }
 
  .b {
   height: 100px;
   width: 500px;
   background-color: #7fffd4;
   margin: 10px;
   padding: 5px;
   text-align: center;
  }
 </style>
</head>
<body>
 <div id="d1" class="a"></div>
 <div id="d2" class="b"></div>
 <script>
  $(document).ready(function () {
   /*возврат значения*/
   $('#d1').text('width = ' + $('#d1').width());
 
   /*установка или изменение значения*/
   $('#d2').width(600).css({ 'line-height': $('#d2').height() + 'px' }).text('width = ' + $('#d2').width());
  });
 </script>
</body>
</html>
 
 
 

innerHeight()

Функция возвращает высоту + внутренние отступы, единица измерения не указывается.
Скрыть

Показать

Копировать

Выполнить
  index.html  
<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8" />
 <title>New Страница</title>
 <!-- подключаем библиотеку онлайн через Google CDN -->
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
 <style>
  .a {
   height: 100px;
   width: 500px;
   background-color: #ff9a4e;
   margin: 10px;
   padding: 5px;
   text-align: center;
   line-height: 100px;
  }
 </style>
</head>
<body>
 <div id="d1" class="a"></div>
 <script>
  $(document).ready(function () {
   /*возврат значения*/
   $('#d1').text('height + padding = ' + $('#d1').innerHeight());
  });
 </script>
</body>
</html>
 
 
 

innerWidth()

Функция возвращает ширину + внутренние отступы, единица измерения не указывается.
Скрыть

Показать

Копировать

Выполнить
  index.html  
<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8" />
 <title>New Страница</title>
 <!-- подключаем библиотеку онлайн через Google CDN -->
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
 <style>
  .a {
   height: 100px;
   width: 500px;
   background-color: #ff9a4e;
   margin: 10px;
   padding: 5px;
   text-align: center;
   line-height: 100px;
  }
 </style>
</head>
<body>
 <div id="d1" class="a"></div>
 <script>
  $(document).ready(function () {
   /*возврат значения*/
   $('#d1').text('width + padding = ' + $('#d1').innerWidth());
  });
 </script>
</body>
</html>
 
 
 

outerHeight()

Если в качестве параметра функции нечего не передается или передается false, то тогда функция возвращает высоту + внутренние отступы + толщину рамки, единица измерения не указывается.
Если в качестве параметра функции передается true, то тогда функция возвращает высоту + внешние отступы + внутренние отступы + толщину рамки, единица измерения не указывается.
Скрыть

Показать

Копировать

Выполнить
  index.html  
<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8" />
 <title>New Страница</title>
 <!-- подключаем библиотеку онлайн через Google CDN -->
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
 <style>
  .a {
   height: 100px;
   width: 500px;
   background-color: #ff9a4e;
   margin: 10px;
   padding: 5px;
   text-align: center;
   line-height: 100px;
   border: 2px solid #F00;
  }
 
  .b {
   height: 100px;
   width: 500px;
   background-color: #7fffd4;
   margin: 10px;
   padding: 5px;
   text-align: center;
   line-height: 100px;
   border: 2px solid #F00;
  }
 </style>
</head>
<body>
 <div id="d1" class="a"></div>
 <div id="d2" class="b"></div>
 <script>
  $(document).ready(function () {
   /*возврат значения*/
 
   //height(100px) + top padding(5px) + top border(2px) +
   //bottom padding(5px) + bottom border(2px) = 114px
   $('#d1').text('height + padding + border = ' + $('#d1').outerHeight());
 
   //height(100px) + top margin(10px) + top padding(5px) + top border(2px) +
   //bottom margin(10px) + bottom padding(5px) + bottom border(2px) = 134px
   $('#d2').text('height + margin + padding + border = ' + $('#d2').outerHeight(true));
  });
 </script>
</body>
</html>
 
 
 

outerWidth()

Если в качестве параметра функции нечего не передается или передается false, то тогда функция возвращает ширину + внутренние отступы + толщину рамки, единица измерения не указывается.
Если в качестве параметра функции передается true, то тогда функция возвращает ширину + внешние отступы + внутренние отступы + толщину рамки, единица измерения не указывается.
Скрыть

Показать

Копировать

Выполнить
  index.html  
<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8" />
 <title>New Страница</title>
 <!-- подключаем библиотеку онлайн через Google CDN -->
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
 <style>
  .a {
   height: 100px;
   width: 500px;
   background-color: #ff9a4e;
   margin: 10px;
   padding: 5px;
   text-align: center;
   line-height: 100px;
   border: 2px solid #F00;
  }
 
  .b {
   height: 100px;
   width: 500px;
   background-color: #7fffd4;
   margin: 10px;
   padding: 5px;
   text-align: center;
   line-height: 100px;
   border: 2px solid #F00;
  }
 </style>
</head>
<body>
 <div id="d1" class="a"></div>
 <div id="d2" class="b"></div>
 <script>
  $(document).ready(function () {
   /*возврат значения*/
 
   //width(500px) + left padding(5px) + left border(2px) +
   //right padding(5px) + right border(2px) = 514px
   $('#d1').text('width + padding + border = ' + $('#d1').outerWidth());
 
   //width(500px) + left margin(10px) + left padding(5px) + left border(2px) +
   //right margin(10px) + right padding(5px) + right border(2px) = 534px
   $('#d2').text('width + margin + padding + border = ' + $('#d2').outerWidth(true));
  });
 </script>
</body>
</html>
 
 
 

offset()

Функция возвращает или устанавливает координаты верхнего левого угла элемента относительно верхнего левого угла страницы.
Скрыть

Показать

Копировать

Выполнить
  index.html  
<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8" />
 <title>New Страница</title>
 <!-- подключаем библиотеку онлайн через Google CDN -->
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
 <style>
  * {
   margin: 0;
   padding: 0;
  }
  .a {
   height: 100px;
   width: 400px;
   background-color: #ff9a4e;
   text-align: center;
   line-height: 100px;
  }
 
  .b {
   height: 100px;
   width: 400px;
   background-color: #7fffd4;
   text-align: center;
   line-height: 100px;
   }
 </style>
</head>
<body>
 <div id="d1" class="a"></div>
 <div id="d2" class="b"></div>
 <script>
  $(document).ready(function () {
   /*возвращает координаты относительно начала страницы*/
   $('#d1').text('top = ' + $('#d1').offset().top + ' left = ' + $('#d1').offset().left);
 
   /*устанавливает координаты относительно начала страницы*/
   $('#d2').offset({ 'top': 300, 'left': 300 });
   $('#d2').text('top = ' + $('#d2').offset().top + ' left = ' + $('#d2').offset().left);
  });
 </script>
</body>
</html>
 
 
 

position()

Функция возвращает координаты верхнего левого угла элемента относительно верхнего левого угла элемента.
Скрыть

Показать

Копировать

Выполнить
  index.html  
<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8" />
 <title>New Страница</title>
 <!-- подключаем библиотеку онлайн через Google CDN -->
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
 <style>
  * {
   margin: 0;
   padding: 0;
  }
 
  #main {
   height: 500px;
   width: 500px;
   position: absolute;
   top: 50%;
   left: 50%;
   margin-top: -250px;
   margin-left: -250px;
   background-color: #fff68f;
  }
 
  .a {
   height: 100px;
   width: 200px;
   position: relative;
   top: 50px;
   left: 100px;
   background-color: #7fffd4;
   text-align: center;
   line-height: 100px;
  }
 
 </style>
</head>
<body>
 <div id="main">
  <div id="d1" class="a"></div>
 </div>
 <script>
  $(document).ready(function () {
   /*возвращает координаты относительно начала элемента*/
   $('#d1').text('top = ' + $('#d1').position().top + ' left = ' + $('#d1').position().left);
  });
 </script>
</body>
</html>
 
 
 

scrollTop()

Функция возвращает или задает значение вертикальной прокрутки.
Скрыть

Показать

Копировать

Выполнить
  index.html  
<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8" />
 <title>New Страница</title>
 <!-- подключаем библиотеку онлайн через Google CDN -->
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
 <style>
  * {
   margin: 0;
   padding: 0;
  }
 
  #main {
   height: 300px;
   width: 300px;
   position: absolute;
   top: 50%;
   left: 50%;
   margin-top: -150px;
   margin-left: -150px;
   background-color: #fff68f;
   overflow-x: scroll;
   overflow-y: scroll;
  }
 
  p, button {
   margin: 5px;
  }
 </style>
</head>
<body>
 <p>Переместите вертикальную прокрутку и нажмите кнопку</p>
 <button id="b1">OK</button>
 <br />
 <p>начальное значение scroll top = <span id="s1"></span></p>
 <p>текущее значение scroll top &nbsp;&nbsp;&nbsp;= <span id="s2">0</span></p>
 <div id="main">
  <img src="img/b.jpg" />
 </div>
 <script>
  $(document).ready(function () {
   $('#s1').text($('#main').scrollTop());
   $('#b1').click(function () {
    $('#s2').text($('#main').scrollTop());
   });
  });
 </script>
</body>
</html>
 
 
 

scrollLeft()

Функция возвращает или задает значение горизонтальной прокрутки.
Скрыть

Показать

Копировать

Выполнить
  index.html  
<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8" />
 <title>New Страница</title>
 <!-- подключаем библиотеку онлайн через Google CDN -->
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
 <style>
  * {
   margin: 0;
   padding: 0;
  }
 
  #main {
   height: 300px;
   width: 300px;
   position: absolute;
   top: 50%;
   left: 50%;
   margin-top: -150px;
   margin-left: -150px;
   background-color: #fff68f;
   overflow-x: scroll;
   overflow-y: scroll;
  }
 
  p, button {
   margin: 5px;
  }
 </style>
</head>
<body>
 <p>Переместите горизонтальную прокрутку и нажмите кнопку</p>
 <button id="b1">OK</button>
 <br />
 <p>начальное значение scroll left = <span id="s1"></span></p>
 <p>текущее значение scroll left &nbsp;&nbsp;&nbsp;= <span id="s2">0</span></p>
 <div id="main">
  <img src="img/b.jpg" />
 </div>
 <script>
  $(document).ready(function () {
   $('#s1').text($('#main').scrollLeft());
   $('#b1').click(function () {
    $('#s2').text($('#main').scrollLeft());
   });
  });
 </script>
</body>
</html>