คำสั่ง attr ของ jQuery นั้นไว้สำหรับดึงค่าจาก attribute ของ element ในเพจ หรือใช้สำหรับกำหนดค่าให้กับ attribute ก็ได้ครับ
การดึงค่า ไวยากรณ์ จะเป็นดังนี้ :
attr(attrname) |
attrname : คือ ชื่อ attribute
ดูตัวอย่างครับ จะเข้าใจชัดเจนขึ้น
$('#get').click(function(){
alert( $('img').attr( 'src' ) ); //= http://www.select2web.com/wp-content/themes/typebased/styles/default/logo.jpg
alert( $('img').attr( 'alt' ) ); //= select2web
alert( $('img').attr( 'width' ) ); //= 400
});
<img src="http://www.select2web.com/wp-content/themes/typebased/styles/default/logo.jpg" alt="select2web" title="select2web" /> |
ส่วนการกำหนดค่า ไวยากรณ์จะเป็นดังนี้ครับ :
attr( attrname , value ) |
attrname : คือ ชื่อ attribute
value : คือ ค่าที่ต้องการกำหนดให้กับ attribute
ดูตัวอย่างครับ
$('#set').click(function(){
$('img').attr( 'width' , 200 );// ภาพจะถูกย่อเหลือ 200
});
<img src="http://www.select2web.com/wp-content/themes/typebased/styles/default/logo.jpg" alt="select2web" title="select2web" /> |
* โน๊ตสักหน่อยครับ attrname นั้นไม่สนใจเรื่องตัวเล็กตัวใหญ่นะครับ title,Title,TITLE,TiTle ใช้ได้ทุกตัว แต่อย่างไรก็ตาม แนะนำว่า ให้ใช้เป็นตัวเล็กทั้งหมด ดีที่สุดครับ
$('img').attr( 'width' , 200 );
$('img').attr( 'Width' , 200 );
$('img').attr( 'WIDTH' , 200 );
$('img').attr( 'WidtH' , 200 ); |
** ในกรณีที่คุณ get ค่าของ attribute ที่ไม่มีอยู่ในโลกของ HTML คำสั่ง attr จะคืนค่า undefined กลับมา
$('img').attr( 'titel' ); //=undefined แอททริบิวต์ titel เขียนผิด มันไม่มี
$('img').attr( 'withd' );//=undefined |
วัชรเมธน์ ชิษณุคุปต์ ศรีเนธิโรทัย
Programmer, Blogger
ชีวิตมันคือการเดินทางเพื่อค้นหาอะไรบางอย่าง และเพื่อค้นพบอะไรบางอย่าง สิ่งที่รู้แล้วจะได้บอกกล่าวให้คนข้างหลังได้ฟัง เพื่อเดินลุยเข้าไปในพงหนามอย่างเตรียมใจไว้แล้วว่าอาจจะต้องเจ็บ
Leave a Reply