دوره های آموزشی آکادمی پی وی لرن (پروژه محور و ویژه بازار کار)



  • ۲۶
  • آبان

جلسه ۲۰ : کار با ابعاد و اندازه عناصر html در jQuery

  • دسته‌بندی‌ها :
جلسه ۲۰ : کار با ابعاد و اندازه عناصر html در jQuery
    • جزئیات
    • نوع محتواآموزش تصویری

      مقدمه

      با عرض سلام و وقت بخیر خدمت کاربران سایت پی وی لرن . و کاربرانی که دوره کامل آموزش jQuery ، را دنبال می کنند. در بخش های اخیر ، با نحوه  ی دستیابی و دستکاری صفات و ویژگی های css ، آشنا شدیم. در این بخش قصد داریم به مبحث دستکاری اندازه و ابعاد عناصر html در jQuery یا dimensions در jQuery ، بپردازیم.

      اگر در جریان روال آموزشهای این دوره باشید. چند جلسه ی اخیر را به مباحث چگونگی دستیابی و دستکاری ویژگی ها و خواص css ، در jQuery ، پرداختیم. و در همین راستا، به ارائه موضوعات کار با محتوا و ویژگی های CSS در jQuery و در ادامه آن موضوع آشنایی با تابع ()css در jQuery ، پرداختیم.

      در ادامه ی این بخش، مطالب آموزش دستکاری اندازه و ابعاد عناصر html یا dimensions در jQuery ، را ارائه داده ایم.

      دستکاری اندازه و ابعاد عناصر html یا dimensions در jQuery

      دستکاری اندازه و ابعاد عناصر html یا dimensions در jQuery

      دستکاری اندازه و ابعاد عناصر html یا dimensions در jQuery

      در جی کوئری، دستکاری ابعاد عناصر و پنجره مرورگر آسان است.

      توابع کار با ابعاد در jQuery

      jQuery ، توابعی ر ابرای ایجاد امکان دستکاری ابعاد و اندازه های عناصر html ، معرفی کرده است:

      • ()width
      • ()height
      • ()innerWidth
      • ()innerHeight
      • ()outerWidth
      • ()outerHeight

      توابع ()width و ()height

      تابع ()width ، برای دسترسی و تنظیم مقدار عرض (width) ، عناصر html معرفی شده است.(ویژگی های padding, border و margin را در نظر نمی گیرد).

      تابع ()height ، نیز برای دسترسی و تنظیم مقدار ارتفاع (height) ، عناصر html معرفی شده است.(ویژگی های padding, border و margin را در نظر نمی گیرد).

      مثال زیر چگونگی دریافت مقادیر عرض و ارتفاع عنصر <div> ، را مشخص می کند:

      مثال : 

      توابع ()innerWidth و ()innerHeight

      تابع ()innerWidth ، برای دسترسی و تنظیم مقدار عرض (width) ، عناصر html معرفی شده است.(ویژگی padding را در نظر می گیرد).

      تابع ()innerHeight ، برای دسترسی و تنظیم مقدار ارتفاع (height) ، عناصر html معرفی شده است.(ویژگی padding را در نظر می گیرد).

      مثال زیر دسترسی به مقادیر عرض و ارتفاع عنصر <div> ، را با استفاده از دو تابع فوق، نشان می دهد:

      مثال : 

      توابع ()outerWidth و ()outerHeight

      تابع ()outerWidth ، برای دسترسی و تنظیم مقدار عرض (width) ، عناصر html معرفی شده است.(ویژگی های padding  و border را در نظر می گیرد).

      تابع ()outerHeight ، برای دسترسی و تنظیم مقدار ارتفاع (height) ، عناصر html معرفی شده است.(ویژگی های padding  و border را در نظر می گیرد).

      مثال زیر بخوبی استفاده از توابع  ()outerWidth و ()outerHeight ، را برای دریافت مقادیر عرض و ارتفاع عنصر <div>، نشان می دهد:

      مثال : 

      نکته:

      تابع (true)outerWidth ، برای دسترسی و تنظیم مقدار عرض (width) ، عناصر html معرفی شده است.(ویژگی های padding  و border و margin را در نظر می گیرد).

      تابع (true)outerHeight ، برای دسترسی و تنظیم مقدار ارتفاع (height) ، عناصر html معرفی شده است.(ویژگی های padding  و border و margin را در نظر می گیرد).

      مثال : 

      مثال های بیشتر

      مثال: این مثال، چگونگی برگرداندن عرض و ارتفاع عناصر html و پنجره مرورگر را نشان می دهد:

      مثال : 

      مثال۲: این مثال تنظیم عرض و ارتفاع عنصر <div>، را نشان می دهد:

      مثال : 

      کلام آخر

      در بخشهای اخیر این فصل ، با چگونگی دستیابی به کدهای css ، و توابعی که در این زمینه معرفی شده اند. آشنا شدیم. در ادامه این مباحث در این بخش به موضوع دستکاری اندازه و ابعاد عناصر html یا dimensions در jQuery ، پرداختیم. امیدواریم که این مباحث، مورد توجه و استفاده ی شما قرار گرفته باشد.

       

      QR:  جلسه ۲۰ : کار با ابعاد و اندازه عناصر html در jQuery
      به اشتراک بگذارید