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

25 September 2008

สมมติ 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

21 Mar 11 การสร้างปุ่ม facebook ล็อกอิน เว็บไซต์ แบบแสดงรูป และกำหนดเพิ่มเติม อ่าน 2418 02 Oct 10 สร้าง animation แนะนำเส้นทาง ใน google map อย่างง่าย อ่าน 2400 05 Nov 10 แนวทาง ประยุกต์ กำหนด event ให้กับ jQuery UI datepicker อ่าน 2370 11 Nov 10 แนะนำ การแทรก swf ไฟล์ ด้วย jQuery SWFObject Plugin อ่าน 2364 26 Aug 10 ใช้ comments.get เรียกและ บันทึก facebook comment ล่าสุด ลงฐานข้อมูล ด้วย jQuery อ่าน 2363 27 May 10 ทบทวน ลำดับ การทำงาน mouse events ใน jQuery อ่าน 2354 21 Oct 10 ประยุกต์ ใช้ jQuery สร้างข้อความเลื่อนขึ้น เลื่อนลง คล้าย marquee แนวตั้ง อ่าน 2333 05 Apr 10 กำหนด link ลิ้งค์ ทั้งหมด ให้ เปิดหน้าต่างใหม่ ด้วย jQuery อย่างง่าย อ่าน 2320 12 Sep 10 การดึง attribute และค่าต่างๆ จาก xml ไฟล์ด้วย jQuery อย่างง่าย อ่าน 2312 02 Dec 10 แทรก emoticon ด้วย javascript ฟังก์ชัน ให้กับ ckeditor อ่าน 2266 01 Nov 10 ประยุกต์ ฟังก์ชัน animate ใน jQuery เลื่อน scroll หน้าเพจ อ่าน 2264 27 Jan 10 การใช้งาน jQuery.contains() ใน jQuery 1.4 อ่าน 2255 27 Jun 11 ลูกเล่น เพิ่มช่องรับ input type file อัตโนมัติ ด้วย jQuery อ่าน 2235 21 Dec 10 กำหนด ปุ่ม ให้ทำงาน เมื่อคลิกที่ checkbox ยอมรับเงื่อนไข ด้วย jQuery อ่าน 2171 26 Jan 10 การใช้งาน method .clearQueue() ใน jQuery 1.4 javascript library เวอร์ชั่นล่าสุด อ่าน 2122

บทความคนเข้าอ่านวันนี้

25 Sep 08 CSS แทรกโค๊ดในเว็บโดยมีหมายเลขบรรทัดกำกับ อ่าน 2743 06 Nov 10 แนะนำ jQuery UI Effect แบบ ไม่ต้องใช้งานร่วมกับ event show hide และ toggle อ่าน 2549 31 Oct 09 ใช้งาน CSS Sprite images กับ การกำหนด CSS ของ Input form อย่างง่าย อ่าน 4332 05 Jul 10 ทบทวน วันที่ date object ใน javascript อ่าน 2734 18 Mar 09 สร้างเครื่องคิดเลขอย่างง่ายด้วย CSS และ jQuery อ่าน 2071 24 Sep 10 ประยุกต์ facebox ของ jQuery แทนการใช้ mootools facebox มาใช้งาน อ่าน 3191 30 Oct 08 กำหนดเวลารอดำเนินการ ด้วย javascript อย่างง่าย อ่าน 2719 06 Jun 11 แนวทางการกำหนด expired header ให้กับรูปภาพ ด้วย php อย่างง่าย อ่าน 739 25 Sep 08 กรอกข้อมูลได้เฉพาะตัวเลข อ่าน 3675 25 Sep 08 หาตำแหน่งของ element แนวแกน x แกน y ด้วยฟังก์ชันของ jQuery อ่าน 2571 02 Nov 10 แนะนำ และการใช้งาน jQuery Colorpicker Plugin การเลือกค่าสี อ่าน 1423 01 Nov 10 ประยุกต์ ฟังก์ชัน animate ใน jQuery เลื่อน scroll หน้าเพจ อ่าน 2264 19 Oct 10 เริ่มต้นการใช้งาน jwplayer jquery plugin แสดง video บนเว็บไซต์ อ่าน 2682 26 Oct 08 เช็ค browser ด้วย javascript ได้ทั้ง IE Firefox Opera Chrome อ่าน 3920 14 Sep 10 การดึงข้อมูล จากฐานข้อมูล สร้าง xml ไฟล์ ด้วย php อ่าน 3920 25 Sep 08 แบ่งหน้า ด้วย Code แบบง่าย อ่าน 5593 14 Jan 10 รู้จัก property position ของ css ให้มากขึ้น ด้วย ตัวอย่าง และคำอธิบาย อ่าน 6063 11 Sep 10 กำหนด แก้ไข เปลี่ยนแปลง รูปแบบ ประเภท ของ แผนที่ map types ใน google map อ่าน 1918 07 Sep 10 ใช้ ckeditor กับ filemanager ด้วย php รองรับ ฟังก์ชัน javascript อ่าน 3407 08 Oct 08 คำสั่ง SQL DISTINCT อ่าน 4861
จำนวนผู้เยี่ยมชม 777889
คน 2012 © Copyright ninenik.com. All rights reserved.