標籤：char 樣式 round content 元素 width 藍色 var asc
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style type="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> <script type="text/javascript" src=‘jquery-3.2.1.min.js‘></script> <script type="text/javascript"> $(function(){ var $content_height = $(‘.content‘).css(‘height‘); //擷取.content元素的height,帶有單位50px var $height = $(‘.content‘).height(); //擷取.content的高度，不帶單位50 var $width = $(‘.content‘).width(); //擷取.content的寬度，不帶單位50 var $offset = $(‘.content‘).offset(); //擷取.content元素在當前視窗的相對位移 var top = $offset.top; //到當前視窗top的值 var left = $offset.left; //到當前視窗left的值 var $position = $(‘.content‘).position(); //擷取元素相對於最近的一個position樣式屬性設定為relative或者absolute的父節點的相對位移值 var position_top = $position.top; // var position_left = $position.left; var scrollTop = $(‘p‘).scrollTop(); //擷取元素的捲軸距頂端的距離 var scrollLeft = $(‘p‘).scrollLeft(); //擷取元素的捲軸距頂端的距離 $(‘.content‘).css(‘background‘,‘blue‘); //設定.content元素的background為藍色 $(‘.content‘).css({‘background‘:‘blue‘,‘width‘:‘80px‘}); //設定多個style }); </script></head><body> <div class="box"> <div class="content"></div> </div></body></html>
jQuery-css()、height()、width()、offset()、position()、scrollTop()、scrollLeft()
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
