iT邦幫忙

0

28.使用jQuery變更CSS樣式

  • 分享至 

  • xImage
  •  

一、.css()
->css("CSS屬性名稱"); //取得第一個符合之元素的CSS樣式
->css("CSS屬性名稱","屬性值"); //根據參數設定所有符合之元素的CSS樣式
->css({"CSS屬性名稱":"屬性值"," CSS屬性名稱":"屬性值",...});
EX: css("CSS屬性名稱");
1)https://ithelp.ithome.com.tw/upload/images/20231012/20163468nHv3U60A8x.png
2) css("CSS屬性名稱","屬性值");
https://ithelp.ithome.com.tw/upload/images/20231012/20163468afhr4vTzbm.png
3) css({"CSS屬性名稱":"屬性值"," CSS屬性名稱":"屬性值",...});
https://ithelp.ithome.com.tw/upload/images/20231012/20163468164LmnT5un.png
二、width()、height()
->width():取得 / 設定元件區塊(不含padding, border)寬度值(單位:px)。ex: $('CSS屬性名稱').width(); / $('CSS屬性名稱').width(參數);
->height():取得 / 設定元件區塊高度值(單位:px)(不含padding, border)。ex: $('div').height(); / $('div').height(參數);
https://ithelp.ithome.com.tw/upload/images/20231012/20163468aokqIHU16K.png

  • 事件
    一、on()方法,針對被選定之元素上綁定一個或多個事件處理函數
    ->.on(events [,selector][,data], handler);
    ->.on(events [,selector][,data]);
    -events: 設定一個或多個空白隔開的事件名稱
    -selector: 觸發事件的元素。
    -data:傳遞給事件處理程式的資料。
    -handler: 事件處理程式。
    https://ithelp.ithome.com.tw/upload/images/20231012/20163468AUsqtvO3fa.png
    二、off(),移除事件處理程式,跟on()相反
    ->.off( events [, selector ] [, handler ] )
    ->.off()
    Ex:
    ->$('p').off() //移除所有段落的所有事件處理程式
    ->$('p').off('click', '**') //移除所有段落的click事件處理程式
    https://ithelp.ithome.com.tw/upload/images/20231012/20163468ypOxZoFWIu.png
    當我直接點擊執行時,可以將背景設為粉紅色,但是當我先點擊移除時,特效則被移除,再點擊執行後則無法讓他產生背景設為粉色的變化。
    https://ithelp.ithome.com.tw/upload/images/20231012/20163468cbAiQpcVOy.png
    三、ready() 用來設定當 DOM已經完全載入並準備好時要執行的函式。
    ->$(function)
    ->$().ready(function)
    ->$(document).ready(function)
    EX:
$(document).ready(function() {
  // 這裡放置需要在 DOM 完全載入後執行的程式碼
  alert('DOM 已經載入完成!');
});

https://ithelp.ithome.com.tw/upload/images/20231012/20163468IpZeSvg4cD.png
//jQuary3.0 移除了$(document).on(“ready”,handler)


圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言