innerWidth() trong jQuery

Miêu tả

Phương thức innerWidth() trong jQuery nhận độ rộng bên trong (trừ Border và bao gồm padding) cho phần tử đã so khớp đầu tiên.

Cú pháp

Sau đây là cú pháp cho innerWidth() trong jQuery:

selector.innerWidth( )

Tham số

Dưới đây miêu tả chi tiết về các tham số được sử dụng trong phương thức innerWidth() trong jQuery:

• NA

Ví dụ

Sau đây là ví dụ đơn giản minh họa cách sử dụng của phương thức innerWidth() trong jQuery:

<html>
   <head>
      <title>The jQuery Example</title>
      <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
		
      <script type="text/javascript" language="javascript">
         $(document).ready(function() {
            $("div").click(function () {
               var color = $(this).css("background-color");
               var width = $(this).innerWidth();
               $("#result").html("Inner Width is <span>" + width + "</span>.");
               $("#result").css({'color': color, 'background-color':'gray'});
            });
         });
      </script>
		
      <style>
         #div1{ margin:10px;padding:12px; border:2px solid #666; width:60px;}
         #div2 { margin:15px;padding:5px; border:5px solid #666; width:60px;}
         #div3 { margin:20px;padding:4px; border:4px solid #666; width:60px;}
         #div4 { margin:5px;padding:3px; border:3px solid #666; width:60px;}
      </style>
		
   </head>
	
   <body>
	
      <p>Click on any square:</p>
      <span id="result"> </span>
		
      <div id="div1" style="background-color:blue;"></div>
      <div id="div2" style="background-color:pink;"></div>
      <div id="div3" style="background-color:#123456;"></div>
      <div id="div4" style="background-color:#f11;"></div>
		
   </body>
	
</html>

Nó sẽ cho kết quả:

Các bài học jQuery khác tại VietJack:

• jQuery là gì
• jQuery - Cơ bản
• jQuery - Selector
• jQuery - Thuộc tính
• jQuery - Traverse