jQuery 是一個JavaScript 的庫,針對HTML文檔的編程,助力開發者操作文檔,實現動態效果。其中修改樣式是jQuery的一個基礎功能,今天就讓我們來學習一下關于如何使用jQuery 修改樣式的方法。
//CSS 方法 //通過CSS方法可以輕易地訪問或修改元素的樣式 //通過修改CSS屬性來改變樣式 //訪問CSS樣式 $("#example").css("background-color"); //修改CSS樣式 $("#example").css("background-color", "red"); //addClass 方法 //addClass()方法是在指定的元素中添加CSS類 //可以與CSS樣式制作更好的交叉效果 //添加CSS類 $("h1").addClass("headline"); //添加多個了 $("h1").addClass("headline important"); //使用函數 添加類 $("h1").addClass(function(){ if($(this).text().length >10){ return "long-title"; } }); //removeClass 方法 //removeClass()方法從指定的元素中刪除CSS類 //刪除單個類 $("h1").removeClass("headline"); //刪除多個類 $("h1").removeClass("headline important"); //使用函數刪除類 $("h1").removeClass(function(){ if($(this).text().length >10){ return "long-title"; } }); //toggleClass 方法 //toggleClass()方法可以在指定的元素中添加或移除CSS類 //可用于創建幾個CSS類之間的交替效果,或者添加或刪除CSS類 //如果目標元素沒有該類,則添加這個類; //如果目標元素已經有該類,則從目標元素中刪除這個類。 $("h1").toggleClass("headline"); //可以傳遞multiple classes $("h1").toggleClass("headline important"); //同時添加和刪除類: $("h1").toggleClass("headline important", true);
以上就是jQuery 修改樣式的基本方法,可以根據自己的需求進行選擇和使用。
上一篇jquery 倍數
下一篇jquery 位移1