- Tham gia
- 28/02/2015
- Bài viết
- 16,989
- Được Like
- 12,732
Cách sử dụng các phương thức jQuery để tương tác với CSS class
jQuery có một số phương thức làm việc với class CSS như: .addClass(), .hasClass(), .removeClass(), .toggleClass()
$("div").addClass("header") : thêm class có tên header vào các phần tử div. Cũng có thể thêm nhiều class như $("div").addClass("class1 class2 class3")
Ví dụ
Ví dụ sau sẽ thêm bớt, kiểm tra phần tử với class có tên "classexam1"
Chúc các bạn thành công.
jQuery có một số phương thức làm việc với class CSS như: .addClass(), .hasClass(), .removeClass(), .toggleClass()
- addClass thêm class vào phần tử
- removeClass xóa đi class trong phần tử
- hasClass kiểm tra xem phần tử có một CSS class hay không
- toggleClass thêm class nếu nó đang có trong phần tử, nếu không thì xóa class
$("div").addClass("header") : thêm class có tên header vào các phần tử div. Cũng có thể thêm nhiều class như $("div").addClass("class1 class2 class3")
Ví dụ
Ví dụ sau sẽ thêm bớt, kiểm tra phần tử với class có tên "classexam1"
Mã:
<style>
.pclass {
padding: 5px;
font-size: 25px;
border: 1px dashed coral;
margin: 10px 0;
}
.classexam1 {
background: #e91e63;
color: #9e9e9e;
border: 5px solid coral;
}
#inforhtml {font-style: italic;}
</style>
<p id="inforhtml"></p>
<div class="pclass">Đoạn văn trong phần tử</div>
<div>
<button onclick="addClass()">.addClass</button>
<button onclick="removeClass()">.removeClass</button>
<button onclick="toggleClass()">.toggleClass</button>
<button onclick="hasClass()">.hasClass</button>
</div>
<script>
function addClass() {
$("div.pclass").addClass("classexam1");
showhtml();
}
function removeClass() {
$("div.pclass").removeClass("classexam1");
showhtml();
}
function toggleClass() {
$("div.pclass").toggleClass("classexam1");
showhtml();
}
function hasClass() {
if ($("div.pclass").hasClass("classexam1"))
alert("Phần tử có class: classexam1");
else
alert("Phần tử không có class: classexam1");
}
function showhtml() {
$("#inforhtml").text($("div.pclass")[0].outerHTML);
}
showhtml();
</script>
Chúc các bạn thành công.
Nguồn: Internet
Bài viết liên quan
Bài viết mới