JQuery是一種快速、小巧、功能豐富的JavaScript庫,可以改善JavaScript的HTML文檔遍歷、事件處理、動畫效果和Ajax交互等方面的處理能力。本篇文章將著重介紹JQuery中添加CSS事件的方法。
$("元素").css("屬性", "屬性值");
其中,“元素”代表需要添加CSS事件的HTML元素,可以是標簽名、類名、ID等;“屬性”代表需要添加的CSS樣式名;“屬性值”代表需要添加的樣式值。
例如,想要為一個按鈕添加CSS事件,使其在點擊后字體變為紅色,代碼如下:
$("#btn").click(function(){ $(this).css("color", "red"); });
在代碼中,我們首先選擇了ID為“btn”的按鈕,然后添加了click事件,當按鈕被點擊時,將其字體的color屬性修改為“red”,即變為紅色。
值得注意的是,在多次添加CSS事件時,可以將多個屬性放在一個JSON對象中,以實現代碼的簡化,示例如下:
$("#btn").click(function(){ $(this).css({ "color": "red", "font-size": "20px", "background-color": "yellow" }); });
在代碼中,我們依然選擇了ID為“btn”的按鈕,然后添加了click事件。當按鈕被點擊時,將其字體的color屬性修改為“red”,字體大小的font-size屬性修改為“20px”,背景顏色的background-color屬性修改為“yellow”。
總之,使用JQuery添加CSS事件是十分簡單的,只需要使用.css()方法即可實現,而且可以選擇一個或多個屬性進行修改,方便快捷。
上一篇css基本操作總結