Live Demo

คำสั่ง attr ของ jQuery นั้นไว้สำหรับดึงค่าจาก attribute ของ element ในเพจ หรือใช้สำหรับกำหนดค่าให้กับ attribute ก็ได้ครับ

การดึงค่า ไวยากรณ์ จะเป็นดังนี้ :

attr(attrname)

attrname : คือ ชื่อ attribute

ดูตัวอย่างครับ จะเข้าใจชัดเจนขึ้น

$('#get').click(function(){
 
	alert( $('img').attr( 'src' ) ); //= https://www.select2web.com/wp-content/themes/typebased/styles/default/logo.jpg
	alert( $('img').attr( 'alt' ) ); //= select2web
	alert( $('img').attr( 'width' ) ); //= 400
 
});
 
<img src="https://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="https://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