jQuery(七)——CSS樣式操作
阿新 • • 發佈：2021-02-16
技術標籤：JavaWebjscsshtmljavascriptvue
1. CSS樣式操作
- addClass() 新增樣式
- removeClass() 刪除樣式
- toggleClass() 有就刪除，沒有就新增樣式。 即，反選
- offset() 獲取和設定元素的座標。 獲取左上角的座標：top、left兩個屬性。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery-2021-02-01</ 頁面顯示效果：
功能實現：
<script type="text/javascript" src="../script/jquery-1.7.2.js"></script>
<script type="text/javascript">
$(function () {
var $div= $("div:first"); //找到待操作的div元素
//1. addClass() - 向被選元素新增一個或多個類
//給按鈕1繫結單擊事件
$("#btn1").click(function () {
$div.addClass("redDiv blueBorder");
});
//2. removeClass() - 從被選元素刪除一個或多個類
//給按鈕2繫結單擊事件
$("#btn2").click(function () {
$div.removeClass("blueBorder"); //刪除選中的css樣式
$div.removeClass(); //預設，全刪
});
//3. toggleClass() - 對被選元素進行新增/刪除類的切換操作
$('#btn3').click(function(){
$div.toggleClass('redDiv'); //已存在就刪除；不存在就新增
});
//4. offset() - 返回第一個匹配元素相對於文件的位置。
$('#btn4').click(function() {
var pos = $div.offset();
alert(pos.top); alert(pos.left);
輸出原有的位置資訊，設定新的位置
$div.offset({
top:200,
left:500
});
});
});
</script>