เช็คขนาดความกว้างความสูงด้วย jQuery

JQUERY-&-FUNCTION

คำสั่ง Width

  • คำสั่ง jQuery(window).width คือ คำสั่งเช็คความกว้างของหน้าจอ window ปัจจุบัน
  • คำสั่ง jQuery(#div).width คือ คำสั่งเช็คความกว้างของ div นั้น
  • คำสั่ง windowWidth = … คือ คำสั่งเก็บค่าที่ได้ใส่ตัวแปร windowWidth
windowWidth = jQuery(window).width();
divWidth = jQuery('#div').width();

 

คำสั่ง Height

  • คำสั่ง jQuery(window).height คือ คำสั่งเช็คความสูงของหน้าจอ window ปัจจุบัน
  • คำสั่ง jQuery(#div).height คือ คำสั่งเช็คความสูงของ div นั้น
  • คำสั่ง windowHeight = … คือ คำสั่งเก็บค่าที่ได้ใส่ตัวแปร windowHeight
windowHeight = jQuery(window).height();
divHeight = jQuery('#div').height();

 

ตัวอย่างการใช้โค้ด

  • คำสั่ง windowHeight = jQuery(window).height() คือ เก็บค่าความสูงไว้ที่ตัวแปร windowHeight
  • คำสั่ง if (windowHeight > 600) คือ ถ้าความสูงมากกว่า 600
  • คำสั่ง jQuert( “#div” ).addClass( “active” ) คือ ทำการเพิ่มคลาสชื่อว่า active ใน #div
windowHeight = jQuery(window).height();

if (windowHeight > 600) {
    jQuery( "#div" ).addClass( "active" );
}