如何通過 css 覆蓋以前使用 javascript 應用的樣式

Question

我已經閱讀了這個問題而沒有下定決心。
我通過javascript將樣式應用於“左容器”，而不是通過類，而是通過id！ 現在我無法覆蓋它！

可重現的最小示例的演示

hideLeftContenier():void{
        console.log('hide')
        let element = document.getElementById('left-conteiner')
        element.style.display = 'none'
}

這是我想要應用的樣式，沒有媒體查詢：

#left-conteiner{
    display: block;
    position: static;
    max-width: 150px;
    min-width: 150px;
    flex-basis: 150px;
    background-color: white;
}

我還嘗試通過類選擇器覆蓋樣式，但沒有結果。
怎么安慰？ 謝謝！

HTML

<button class="icon-button" (click)="showLeftConteiner()">
    <fa-icon class="menu-icon" [icon]="faBars"></fa-icon>
</button>
<div class="conteiner">


    <div class="left-conteiner" id="left-conteiner">
        <div class="filter-box-brand">
            <div class="filterLabel"><b>Brand</b></div>
            <label>
                <input type="checkbox" id="allBrands" name="allBrands" value="all" 
                [(ngModel)]="checkboxBrandAll" (change)="checkboxChange($event)"> all
            </label>
            <div class="checkboxList" *ngFor="let brand of brands ">
                <label>
                    <input type="checkbox" id="{{brand.name}}" name="otherBrands" value="{{brand.name}}"
                    [(ngModel)]="brand.checked" (change)="checkboxChange($event)"> {{brand.name}}
                </label>
                <label class="labelCount"> ({{brand.count}})</label>
            </div>
        </div>
        <br>
        <div class="filter-box-type">
            <div class="filterLabel"><b>Type</b></div>
            <label><input type="checkbox" id="allType" name="allTypes" value="all" [(ngModel)]="checkboxTypeAll" (change)="checkboxChange($event)"> all</label>
            <div class="checkboxList" *ngFor="let type of types">
                <label><input type="checkbox" [(ngModel)]="type.checked" id="{{type.name}}" name="otherTypes" value="{{type.name}}" (change)="checkboxChange($event)"> {{type.name}}</label><label class="labelCount"> ({{type.count}})</label>
            </div>
        </div>
        <button class="hide-button" (click)="hideLeftContenier()">close</button>
    </div>
    
    <div class="central-conteiner">
        <div class="gallery" >
            <app-car-card-gallery *ngFor="let car of filteredCars" [car]="car" [parent]="'gallery'" [usersRatings]="usersRatings"></app-car-card-gallery>
        </div>
    </div>

</div>

Answer 1

已經有人回答了。 但是對於您當前的設計，唯一的解決方案是使用 !important ：

display: block !important;

這不是一個好的做法，因為它通常會導致“難以維護”的 CSS，所以我建議你像這樣使用帶有類切換的 Javascript（示例）：

    hideLeftContenier():void {
        let element = document.getElementById('left-conteiner')
        element.classList.add('hidden');
    }

然后，您需要添加特定的 CSS 規則：

#left-conteiner.hidden {
   display: none;
}