JavaScript中,關於class的調用

来源:http://www.cnblogs.com/winpin-li-home1001/archive/2017/11/27/7904887.html
-Advertisement-
Play Games

PS:class的調用,其實是可以疊加的,當然了這要求樣式不同的情況下,如果樣式相同,則後一個樣式會覆蓋前一個樣式。 1.舉例如下: 所以最後‘測試關於class的調用’幾個字的樣式是:font-size:50px; color:green; 2.這樣的添加類方式很繁瑣,每次添加一個新的,我還要帶上 ...


PS:class的調用,其實是可以疊加的,當然了這要求樣式不同的情況下,如果樣式相同,則後一個樣式會覆蓋前一個樣式。

1.舉例如下:

<div id="test" class="aaa bbb">測試關於class的調用</div>

 

.aaa{
  font-size:20px;
  color:red;    
}
.bbb{
  font-size:50px;
  color:green;
}

 

var test=document.getElementById('test');
test.className='aaa';
test.className='aaa bbb';//因為aaa和bbb的樣式相同,所以,bbb的樣式會覆蓋aaa的樣式

 所以最後‘測試關於class的調用’幾個字的樣式是:font-size:50px; color:green;

2.這樣的添加類方式很繁瑣,每次添加一個新的,我還要帶上之前寫的類,容易帶漏,並且還要檢查是否帶全,所以可以編寫函數方法來解決添加類和刪除類的問題:

function hasClass(element,className){      //判斷是否存在類
       return element.className.match(new RegExp('(\\s|^)'+className+'(\s|$)'));

}
//添加一個Class
function addClass(element,className){
   if(!hasClass(element,className)){
          element.className+=' '+className;
    }   
}   
//刪除一個Class
function removeClass(element,className){
  if(hasClass(element,className)){
       element.className=element.className.replace
     (new RegExp('(\\s|^)'+className+'(\s|$)'),' ');
  }
}     

 


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 1.父頁面調用子頁面的元素 (a代表iframe的id或者class,b代表子頁面) 2.子頁面調用父頁面的元素 $(window.parent.document).contents().find("c") (c代表父頁面的任意元素id或者class) 3.iframe高度自適應 <iframe s ...
  • 一:js原型繼承四步曲 二:原型繼承圖 下圖輔助理解 練習提鞏固理解 ...
  • 掌握表單標簽 掌握表單標簽 瞭解CSS的概念 英文縮寫 Cascading Style Sheet 層疊樣式表 層疊:層層疊加 樣式表:樣式的集合(屬性的集合),不是html的屬性,而是CSS的屬性 瞭解CSS的概念 英文縮寫 Cascading Style Sheet 層疊樣式表 層疊:層層疊加 ...
  • 1. 首先要安裝最新版本的 nodejs 註意:請先在終端/控制台視窗中運行命令 node -v 和 npm -v, 來驗證一下你正在運行 node 6.9.x 和 npm 3.x.x 以上的版本。 更老的版本可能會出現錯誤,更新的版本則沒 問題。 2. 全局安裝Angular CLI 腳手架工具 ...
  • 作者網站: 設置全屏和退出全屏 監聽全屏事件 ...
  • 1.head 1.1.meta標簽 1.2.link標簽 2.body 背景圖片設置 設置背景色,文字顏色 bgcolor:背景色 text:非鏈接文字 link:可鏈接文字 alink:正被點擊的可鏈接文字 vlink:已經點過的可鏈接文字 顏色值,採用十六進位表示,或者英文字母。設置時十六進位借 ...
  • 對於沒參加過互聯網企業招聘,或是沒有參加過大型互聯網企業招聘的人來說,能以這些公司的面試題做為鍛煉,無疑是一種非常好的學習和進步的途徑。下麵是一道騰訊的前端面試題(JS解答),題目本身在現實中意義不大,主要是考察應試者對js及演算法的理解程度,本文給出了三種答案,期待有更大的俠來一試身手,做出更好的解 ...
  • 抽獎代碼里要註意一個地方,就是轉動角度:在電腦語言里,逆時針的轉動才算是正方向,而順時針為負方向。 總結步驟:1.找好圖片素材,當然也可以自己設計一個。(圓盤和指針) 2.先用html將素材寫至頁面當中。 3.設置好樣式,呈現好看的頁面效果。 4.最重要的部分就是在js這塊的實現部分: . (1) ...
一周排行
    -Advertisement-
    Play Games
  • 前言 本文介紹一款使用 C# 與 WPF 開發的音頻播放器,其界面簡潔大方,操作體驗流暢。該播放器支持多種音頻格式(如 MP4、WMA、OGG、FLAC 等),並具備標記、實時歌詞顯示等功能。 另外,還支持換膚及多語言(中英文)切換。核心音頻處理採用 FFmpeg 組件,獲得了廣泛認可,目前 Git ...
  • OAuth2.0授權驗證-gitee授權碼模式 本文主要介紹如何筆者自己是如何使用gitee提供的OAuth2.0協議完成授權驗證並登錄到自己的系統,完整模式如圖 1、創建應用 打開gitee個人中心->第三方應用->創建應用 創建應用後在我的應用界面,查看已創建應用的Client ID和Clien ...
  • 解決了這個問題:《winForm下,fastReport.net 從.net framework 升級到.net5遇到的錯誤“Operation is not supported on this platform.”》 本文內容轉載自:https://www.fcnsoft.com/Home/Sho ...
  • 國內文章 WPF 從裸 Win 32 的 WM_Pointer 消息獲取觸摸點繪製筆跡 https://www.cnblogs.com/lindexi/p/18390983 本文將告訴大家如何在 WPF 裡面,接收裸 Win 32 的 WM_Pointer 消息,從消息裡面獲取觸摸點信息,使用觸摸點 ...
  • 前言 給大家推薦一個專為新零售快消行業打造了一套高效的進銷存管理系統。 系統不僅具備強大的庫存管理功能,還集成了高性能的輕量級 POS 解決方案,確保頁面載入速度極快,提供良好的用戶體驗。 項目介紹 Dorisoy.POS 是一款基於 .NET 7 和 Angular 4 開發的新零售快消進銷存管理 ...
  • ABP CLI常用的代碼分享 一、確保環境配置正確 安裝.NET CLI: ABP CLI是基於.NET Core或.NET 5/6/7等更高版本構建的,因此首先需要在你的開發環境中安裝.NET CLI。這可以通過訪問Microsoft官網下載並安裝相應版本的.NET SDK來實現。 安裝ABP ...
  • 問題 問題是這樣的:第三方的webapi,需要先調用登陸介面獲取Cookie,訪問其它介面時攜帶Cookie信息。 但使用HttpClient類調用登陸介面,返回的Headers中沒有找到Cookie信息。 分析 首先,使用Postman測試該登陸介面,正常返回Cookie信息,說明是HttpCli ...
  • 國內文章 關於.NET在中國為什麼工資低的分析 https://www.cnblogs.com/thinkingmore/p/18406244 .NET在中國開發者的薪資偏低,主要因市場需求、技術棧選擇和企業文化等因素所致。歷史上,.NET曾因微軟的閉源策略發展受限,儘管後來推出了跨平臺的.NET ...
  • 在WPF開發應用中,動畫不僅可以引起用戶的註意與興趣,而且還使軟體更加便於使用。前面幾篇文章講解了畫筆(Brush),形狀(Shape),幾何圖形(Geometry),變換(Transform)等相關內容,今天繼續講解動畫相關內容和知識點,僅供學習分享使用,如有不足之處,還請指正。 ...
  • 什麼是委托? 委托可以說是把一個方法代入另一個方法執行,相當於指向函數的指針;事件就相當於保存委托的數組; 1.實例化委托的方式: 方式1:通過new創建實例: public delegate void ShowDelegate(); 或者 public delegate string ShowDe ...