การกำหนดความกว้างความสูงของ element ด้วยฟังก์ชันของ jQuery

Bookmark and Share

สมมติ xxx คือ selector

รูปแบบฟังก์ชัน $("xxx").height(val);

val คือ ค่าตัวเลขที่ต้องการกำหนดความสูง
ฟังก์ชันนี้ใช้สำหรับกำหนดความสูงของ element หรือ selector เป็น pixels

<script language="javascript">
$(function(){
	$("div").height(50);
});
</script>

จากโค้ดด้านบนเป็นการกำหนดความสูงของ <div> ให้มีความสูงเท่ากับ 50 pixels

นอกจากจะสามารถกำหนดค่าความสูงได้แล้วยังสามารถที่จะดึงค่าความสูงของ element
หรือตัว selector ได้ด้วยฟังก์ชันที่นี้โดย เรียกใช้ฟังก์ชัน height(); โดยไม่ต้องกำหนด
ค่าของ val

รูปแบบฟังก์ชัน $("xxx").height();

ฟังก์ชันนี้ใช้สำหรับดึงค่าความสูงของ element หรือ selector โดยค่าที่ได้จะเป็นค่าตัวเลข
ในหน่วย pixels

	  
<script language="javascript">
$(function(){
	var my_height=$("div").height();
});
</script>

จากโค้ดด้านบนเป็นการดึงค่าความสูงของ <div> มาเก็บไ้ว้ในตัวแปร my_height

ในทำนองเดียวกันการกำหนดความกว้างก็สามารถกำหนดได้ดังต่อไปนี้

รูปแบบฟังก์ชัน $("xxx").width(val);

val คือ ค่าตัวเลขที่ต้องการกำหนดความกว้าง
ฟังก์ชันนี้ใช้สำหรับกำหนดความกว้างของ element หรือ selector เป็น pixels

<script language="javascript">
$(function(){
	$("div").width(100);
});
</script>
      

จากโค้ดด้านบนเป็นการกำหนดความกว้างของ <div> ให้มีความกว้างเท่ากับ 100 pixels

นอกจากจะสามารถกำหนดค่าความกว้างได้แล้วยังสามารถที่จะดึงค่าความกว้างของ element
หรือตัว selector ได้ด้วยฟังก์ชันที่นี้โดย เรียกใช้ฟังก์ชัน width(); โดยไม่ต้องกำหนด
ค่าของ val

รูปแบบฟังก์ชัน $("xxx").width();

ฟังก์ชันนี้ใช้สำหรับดึงค่าความกว้างของ element หรือ selector โดยค่าที่ได้จะเป็นค่าตัวเลข
ในหน่วย pixels

	  
<script language="javascript">
$(function(){
	var my_width=$("div").width();
});
</script>
      

จากโค้ดด้านบนเป็นการดึงค่าความกว้างของ <div> มาเก็บไ้ว้ในตัวแปร my_width




บทความในหมวดที่่น่าสนใจ อื่นๆ jQuery Learning

01 Feb 10 การใช้งาน method delay() ใน jQuery 1.4 อ่าน 1283 14 Mar 09 ค้นหาข้อความในหน้าเว็บเพจอย่างง่ายด้วย jQuery อ่าน 1264 29 Nov 09 กำหนด hilight ของ cell ข้อมูลในตาราง ด้วย jQuery และ CSS อย่างง่าย อ่าน 1240 08 Dec 09 แปลง jQuery object เป็น DOM object อ่าน 1226 07 Dec 09 การเลื่อน scrollbar อัตโนมัติตาม การเลื่อนขึ้นลง ของ mouse ด้วย jQuery อ่าน 1206 20 Mar 10 ใช้ jQuery สร้าง การเลื่อนโฟกัส ของ textbox ด้วยลูกศร บนแป้นพิมพ์ คีบอร์ด keyboard อ่าน 1190 27 Jan 10 การใช้งาน jQuery.contains() ใน jQuery 1.4 อ่าน 1141 27 Nov 09 แก้ปัญหาความกว้าง option ของ select tag ใน ie ด้วย jQuery และ css อย่างง่าย อ่าน 1114 18 Jun 10 การใช้งาน live และ die ใน jQuery 1.4 อ่าน 1102 18 Mar 09 สร้างเครื่องคิดเลขอย่างง่ายด้วย CSS และ jQuery อ่าน 1089 28 Jun 10 การเลือก หรือ ไม่เลือก checkbox ทั้งหมด และ hilight ด้วย jQuery อย่างง่าย อ่าน 1008 05 Apr 10 กำหนด link ลิ้งค์ ทั้งหมด ให้ เปิดหน้าต่างใหม่ ด้วย jQuery อย่างง่าย อ่าน 956 26 Jan 10 การใช้งาน method .clearQueue() ใน jQuery 1.4 javascript library เวอร์ชั่นล่าสุด อ่าน 953 27 May 10 ทบทวน ลำดับ การทำงาน mouse events ใน jQuery อ่าน 927 21 Jul 10 เทคนิค การเพิ่ม ลบ แถว ในตาราง รายการข้อมูล ด้วย jQuery อย่างง่าย อ่าน 341
จำนวนผู้เยี่ยมชม 157925 คน 2010 © Copyright ninenik.com. All rights reserved.