如何使用jQuery指定css并覆盖css文件中的css

Question

I have a three containers with different width. First container is taking 14% and second container is taking 26% and third container is taking 60%.Here is my code.

 <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;
}

It is working. when the page open it shows three containers with proper width and when I click "fa fa-angle-double-left" icon the first container should have fixed with 56px and it should not overlap with other conatiners when I resize screen. I tried this jquery code.

 $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;
    };

This code is not working. when I put this code and I tried resize the screen and the first container width is not fixed to 56px.the percentages mentioned in css is overwriting . In console it still showing the first conatiner width is 14%. How to not override css mentioned using jquery with percentages specified for width in css file?

Answer 1

This is easy and simple method to change the attribute of any tag using jquery.

Use attr() instand of css().

 $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;
};

I hope you will get your solution.

Answer 2

First off, your markup is a bit jacked. There are too many closing div tags, and a stray opening double-quote. Here's my take at what it should be:

 <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> 

Your JS seem to work in my demo: https://jsfiddle.net/y7tjeazo/1/

Here are some things to check:

1. Make sure jQuery is loaded
2. Make sure the $scope class is initialized
3. Make sure the $scope.minPageType() function is being called
4. Make sure all #3 occurs after the markup has already loaded

Lastly, since this is all presentational, consider using CSS + media queries rather than JS. It's much more maintainable.