Cùng học jQuery: jQuery - hàm xử lý style

Bài viết này nói về một số hàm dùng để can thiệp vào style của một element.

css: Dùng để lấy giá trị của một property của element trên website hoặc thiết lập giá trị cho css cho property.

.css (css property name): trả về giá trị của một property.
.css (css property, value): thiết lập giá trị cho một css property của element.
.css ( {list of properties} ): dùng để thiết lập một nhóm các thuộc tính css.

Tình huống: Thay đổi CSS cho ô vuông màu xám

Nút Get: lấy ra giá trị của thuộc tính background-color.
Nút Set: thay đổi giá trị background-color.
Nút Group sẽ gán lại nhóm giá trị background-color, width, height.

Code

<div>
 <style>
 #css_left {
  border:1px solid black;
  background-color:gray;
  width:200px;
  height:200px;
  float:left;
 }
 #css_right {
  float:left;
  margin-left:50px;
  width:200px;
  height:200px;
 }
 </style>
 <script type="text/javascript">
  jQuery(document).ready(function(){
   jQuery("#butGet").click(function(){
    alert("background-color: " + jQuery("#css_left").css("background-color"));
   });
   jQuery("#butSet").click(function(){
    jQuery("#css_left").css("background-color","red");
   });
   jQuery("#butGroup").click(function(){
    jQuery("#css_left").css({"background-color":"green","width":"100px","height":"100px"});
   });
  });
 </script>
 <div id="css_left"></div>
  <div id="css_right">
   <input type="button" value="Get" id="butGet"/>
   <input type="button" value="Set" id="butSet"/>
   <input type="button" value="Group" id="butGroup"/>
  </div>
 <div style="clear:both;"></div>
</div>

Demo

Các hàm thao tác với Attribute của một element.

attr: Dùng để lấy giá trị của một attribute của element hoặc gán giá trị cho một attribute.

.attr (attribute name): trả về giá trị của một attribute của một element.
.attr (attribute name, value): thiết lập giá trị cho một attribute của element.
.attr ( {list of properties} ): dùng để thiết lập một nhóm các attribute cho element.

removeAttr: Dùng để gở bỏ một attribute của một element.

.removeAttr (attribute name): gỡ bỏ một attribute ra khỏi một element.

Tình huống: Thay đổi attribute cho ảnh (thẻ img)

Nút Get: lấy ra giá trị trong attribute src của thẻ img bên trái.

Nút Set One Attribute: Gán lại giá trị cho attribute src của thẻ img(đổi hình hiển thị).

Nút Set Group Attribute: Gán lại giá cho các attribute src, title, alt của ảnh. Để kiểm tra bạn rê chuột vào ảnh sẽ thấy hiện lên dòng tooltip sesshomaru image

Nút Remove Attribute: Gỡ bỏ thuộc tính title của ảnh( rê chuột vào ảnh để kiểm tra ảnh sẽ mất đi dòng tooltip).

Code

<div>
<style>
 #attr_left {
  background-color:gray;
  width:122px;
  height:122px;
  float:left;
 }
 #attr_right {
  float:left;
  margin-left:50px;
  width:122px;
  height:122px;
 }
</style>
<script type="text/javascript">
 jQuery(document).ready(
  function(){jQuery("#butGetAttr").click(function(){
   alert("image src: " + jQuery("#myImage").attr("src"));
  });
  jQuery("#butOneAttr").click(function(){
   jQuery("#myImage").attr("src","https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhNdfLpTMuoC9TvQ81iExZGTW-uZ2EyLHFDk44mer6ZbAoCHLaN_hKAiO4RnN_erOSN6TVpHFpO_DswfpqeYcpG3ybX4VIywyk0N2rs767O6yV-Ouc_fax9CqiKs5iuunm6AQaN2gTv1vXK/s320/sesshomaru.jpeg");
  });
  jQuery("#butGroupAttr").click(function(){
   jQuery("#myImage").attr({src:"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiTslH7dYz31POh8LP3t6M0ZCQY4UOTf23zr_KvD__QwprE4pAZY_CZE3vWmD4C-A1u0mkf6YzHAS8iWBjNLxGjb_QOpg08CI4BhQ9pyJfHuDftEwh4JXdOJJOf9ygryyrOJY1PRgbIRBIc/s320/thSesshomaruChibi.jpg",title:"Sesshomaru image",alt:"jquery attr image"});
  });
  jQuery("#butRemoveAttr").click(function(){
   jQuery("#myImage").removeAttr("title");
  });
 });
 </script>
 <div id="attr_left">
  <img style="display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiTslH7dYz31POh8LP3t6M0ZCQY4UOTf23zr_KvD__QwprE4pAZY_CZE3vWmD4C-A1u0mkf6YzHAS8iWBjNLxGjb_QOpg08CI4BhQ9pyJfHuDftEwh4JXdOJJOf9ygryyrOJY1PRgbIRBIc/s320/thSesshomaruChibi.jpg" border="0" alt=""id="myImage" />
 </div>
 <div id="attr_right">
  <input type="button" value="Get" id="butGetAttr"/>
  <input type="button" value="Set One Attribute" id="butOneAttr"/>
  <input type="button" value="Set Group Attribute" id="butGroupAttr"/>
  <input type="button" value="Remove Attribute" id="butRemoveAttr"/>
 </div>
 <div style="clear:both;"></div>
</div>

Demo

Các hàm thao tác về class

.addClass (class name): Dùng để gán một class cho một element.
.removeClass (class name): gỡ bỏ class ra khỏi attribute class của element.

Tình huống: Thay đổi class cho table

Nút Odd: dòng lẻ trong table sẽ xuất hiện màu nền vàng nhạt cho dòng đó.
Nút Even: dòng chẵn trong table sẽ xuất hiện màu nền xanh nhạt cho dòng đó.
Nút Reverse: đảo ngược hai class của dòng chẵn và lẻ.

Code

<div>
<b>Demo</b>
<style>
 #table_left{
  float:left;
 }
 #button_right{
  float:left;padding-left:50px;
 }
 #my_table{
  border-collapse:collapse;
  border:1px solid black;
  width:400px;
 }
 #my_table tr th{
  border:1px solid black;
 }
 #my_table tr td{
  border:1px solid black;
 }
 .odd{
  background-color:rgb(249,250,192);
  color:red;
  font-weight:bold;
 }
 .even{
  background-color:rgb(200,251,179);
  color:blue;
 }
</style>
<script type="text/javascript">
jQuery(document).ready(function(){
 var odd = false;
 var even = false;
 jQuery("#butReverse").attr("disabled","true");
 jQuery("#butOdd").removeAttr("disabled","true");
 jQuery("#butEven").removeAttr("disabled","true");
 jQuery("#butOdd").click(function(){
  if (!odd){
   odd = !odd;
   jQuery("#my_table").find("tr:odd").addClass("odd");
   if (even){
    jQuery("#butReverse").removeAttr("disabled");
    jQuery("#butOdd").attr("disabled","true");
    jQuery("#butEven").attr("disabled","true");
   }
  }
 });
 jQuery("#butEven").click(function(){
  if (!even){
   even = !even;
   jQuery("#my_table").find("tr:even").addClass("even");
   if (odd){
    jQuery("#butReverse").removeAttr("disabled");
    jQuery("#butOdd").attr("disabled","true");
    jQuery("#butEven").attr("disabled","true");
   }
  }
 });
 jQuery("#butReverse").click(function(){
  jQuery("#my_table").find("tr:even").removeClass("even");
  jQuery("#my_table").find("tr:odd").removeClass("odd");
  jQuery("#my_table").find("tr:even").addClass("odd");
  jQuery("#my_table").find("tr:odd").addClass("even");
 });
});
</script>
<div id="table_left">
 <table id="my_table">
  <tr style="background-color:black;color:white;">
   <th>STT</th><th>Họ và tên</th><th>Ngày sinh</th><th>Giới tính</th>
  </tr>
  <tr>
   <td>1</td><td>Nguyễn Van A</td><td>01/01/1989</td><td>Nam</td>
  </tr>
  <tr>
   <td>2</td><td>Trần Van B</td><td>01/08/1989</td><td>Nam</td>
  </tr>
  <tr>
   <td>3</td><td>Trương Thị C</td><td>05/01/1989</td><td>Nữ</td>
  </tr>
  <tr>
   <td>4</td><td>Phạm Thị D</td><td>02/06/1989</td><td>Nữ</td>
  </tr>
  <tr>
   <td>5</td><td>Lê Văn E</td><td>03/07/1989</td><td>Nam</td>
  </tr>
 </table>
</div>
<div id="button_right"><input type="button" value="Odd" id="butOdd" style="width:75px;"/>
 <input type="button" value="Even" id="butEven" style="width:75px;"/>
 <input type="button" value="Reverse" id="butReverse" style="width:75px;" disabled/></div>
 <div style="clear:both;"></div>
</div>

Demo

STT	Họ và tên	Ngày sinh	Giới tính
1	Nguyễn Văn A	01/01/1989	Nam
2	Trần Văn B	01/08/1989	Nam
3	Trương Thị C	05/01/1989	Nữ
4	Phạm Thị D	02/06/1989	Nữ
5	Lê Văn E	03/07/1989	Nam

Một số câu hỏi thường gặp

Sự khác nhau giữa hàm css và hàm addClass?

Điểm khác nhau cơ bản nhất là hàm addClass thao tác trên attribute class của một element trong khi đó hàm css thao tác trên attribute style.

Tại sao addClass rồi mà element vẫn không thay đổi ?

Bạn nên kiểm tra lại style của element vì class có độ ưu tiên thấp hơn style. Ở ví dụ phía trên dòng tr đầu tiên có attribute style cố định do đó khi addClass vào các dòng lẻ các properties của class không thể đè lên được các properties trong attribute style được vì độ ưu tiên thấp hơn.

Dùng hàm css để add một property cho một element vậy có cách nào remove property đó ra hay không?

Câu trả lời là không. Do hàm css thao tác trên attribute style do đó khi đã add một property vào rồi thì bạn không thể remove nó ra mà chỉ có thể thay đổi giá tri của nó. Nếu muốn remove được thì tốt nhất là định nghĩa hai class khác nhau và sử dùng hàm addClass và removeClass.

Tại sao dùng hàm addClass nhiều lần thì thuộc tính class không đổi?

Do hàm addClass thao tác trên attribute class của element. Trên attribute class có thể tồn tại song song nhiều class khác nhau. Do đó khi dùng liên tiếp thì nó sẽ tự động thêm class vào và các properties trong hai class sẽ được overwrite lẫn nhau. VD: class="class1" dùng tiếp hàm addClass("class2") ta sẽ có class="class1 class2"

Cùng học jQuery

Danh mục

Thứ Sáu, 9 tháng 7, 2010

jQuery - hàm xử lý style

Một số câu hỏi thường gặp

1 nhận xét: