如何使用jquery指定css並覆蓋css文件中的css

Question

我有三個不同寬度的容器。第一個集裝箱佔14％，第二個集裝箱佔26％，第三個集裝箱佔60％。這是我的代碼。

<div class="mainContainer"> 
    <div class="container1"> 
     <div> 
      <label>Label1</label></div> 
     </div> 
     <div "> 
      <label>Label2</label></div> 
     </div> 
     <div ng-click="minPageType()" title="Toggle Panel"> 
      <div ng-if="togglePanel"> 
       <i class="fa fa-angle-double-left"></i> 
      </div> 
      <div ng-if="!togglePanel"> 
       <i class="fa fa-angle-double-right"></i> 
      </div> 
     </div> 
    </div> 
    <div class="container2">    
     // Container2 items 
    </div> 
    <div class="container3"> 
     //Container3 contents 
    </div> 
</div> 

Here is my css 

.container1{ 
    position: absolute; 
    width:14%; 
} 
.container2 { 
    width: 26%; 
    left: 14%; 
    position:absolute; 
} 

.container3 { 
    width: 60%; 
    left: 40%; 
    position:absolute; 
} 

它正在工作。當頁面打開時，它顯示了三個寬度合適的容器，當我點擊「fa fa-angle-double-left」圖標時，第一個容器應該固定爲56px，當我調整屏幕大小時，它不應與其他容器重疊。我試過這個jQuery代碼。

$scope.minPageType = function(){ 
     if($scope.pageTypeToggle === true){ 
      //max screen size   
      $(".container1").css("width", "14%"); 
      $(".container2").css("left", "14%"); 
      $(".container3").css("left", "40%"); 
      $(".container3").css("width", "60%"); 
      $scope.togglePanel = true; 
     } else { 
      //min screen size 
      $(".container1").css("width", "56px"); 
      $(".container2").css("left", "56px"); 
      $(".container3").css("left", "29%"); 
      $(".container3").css("width", "71%"); 
      $scope.togglePanel = false; 
     } 
     $scope.pageTypeToggle = !$scope.pageTypeToggle; 
    }; 

此代碼無效。當我把這個代碼，我試圖調整大小的屏幕和第一個容器寬度不固定爲56px.css中提到的百分比是覆蓋。在控制檯它仍然顯示第一個conatiner寬度是14％。如何不使用jquery覆蓋css文件中提及的寬度指定的css？

Answer 1

這是使用jQuery改變任何標籤的屬性的簡單方法。

使用css（）的attr（）實例。

$scope.minPageType = function(){ 
    if($scope.pageTypeToggle === true){ 
     //max screen size   
     $(".container1").attr('style','width:14% !important') 
     $(".container2").attr('style','left:14% !important') 
     $(".container3").attr('style','left:40% !important') 
     $(".container3").attr('style','width:60% !important') 
     $scope.togglePanel = true; 
    } else { 
     //min screen size 
     $(".container1").attr('style','width:56px !important') 
     $(".container2").attr('style','left:56px !important') 
     $(".container3").attr('style','left:29% !important') 
     $(".container3").attr('style','width:17% !important') 
     $scope.togglePanel = false; 
    } 
    $scope.pageTypeToggle = !$scope.pageTypeToggle; 
}; 

我希望你能得到你的解決方案。

Answer 2

首先，你的標記是有點頂起來的。關閉的div標籤太多，以及一個流言開放的雙引號。這裏是我取它應該是什麼：

<div class="mainContainer"> 
    <div class="container1"> 
     <div> 
      <label>Label1</label> 
     </div> 
     <div> 
      <label>Label2</label> 
     </div> 
     <div ng-click="minPageType()" title="Toggle Panel"> 
      <div ng-if="togglePanel"> 
       <i class="fa fa-angle-double-left"></i> 
      </div> 
      <div ng-if="!togglePanel"> 
       <i class="fa fa-angle-double-right"></i> 
      </div> 
     </div> 
    </div> 

    <div class="container2">    
     // Container2 items 
    </div> 

    <div class="container3"> 
     //Container3 contents 
    </div> 
</div> 

你的JS似乎在我的演示工作：https://jsfiddle.net/y7tjeazo/1/

這裏有一些事情要檢查：

1. 確保jQuery是加載
2. 確保$ scope類已初始化
3. 確保$ scope.minPageType（）函數被調用
4. 確保所有＃3在標記已經加載後發生

最後，由於這是所有的表示，請考慮使用CSS +媒體查詢而不是JS。它更易於維護。