javascript - 单击时更改标题的 CSS 属性

Question

我想要做的是突出显示选中时以不同颜色单击的框的边框。我尝试通过在 selectFlight 方法中使用 document.getElementById 来使用 typescript 文件中的类(在 flight-viewer.html 中使用(单击)调用，如下所示:

flight.viewer.component.ts:

@Component({
    selector: 'flight-viewer',
    templateUrl: 'app/flight-viewer.html',
    styleUrls: ['app/flight-viewer.css']
})
export class FlightViewerComponent  {
    name = 'FlightViewerComponent';
    errorMessage = "";
    stateValid = true;
    flights: Flight[];
    selectedFlight: Flight;
    flightToUpdate: Flight;
    flightClicked = false;
    @Output()
    onFlightUpdating = new EventEmitter<Flight>();

    constructor(private service: FlightService) {
        this.selectedFlight = null;
        this.flightToUpdate = null;
        this.fetchFlights();
    }

    flightSelected(selected: Flight) {
        console.log("Setting selected flight to: ", selected.number);
        this.selectedFlight = selected;
    }
    flightUpdating(selected: Flight) {
        console.log("Setting updateable flight to: ", selected.number);
        this.flightToUpdate = selected;
    }

    updateFlight() {
        console.log("Just selected ", this.selectedFlight.number, " for update");
        this.onFlightUpdating.emit(this.selectedFlight);
    }

    selectFlight(selected: Flight) {
    console.log("Just click on this flight ", selected.number, " for display");
   this.flightClicked = true;
   this.selectedFlight = selected;
    // add 'active' class
    alert(document.getElementById("getFlight"));
    document.getElementById("getFlight").className = "active";
}

    private fetchFlights() {
        this.selectedFlight = null;
        this.flightToUpdate = null;
        this.service
            .fetchFlights()
            .subscribe(flights => this.flights = flights,
                       () => this.raiseError("No flights found!"));
    }
}

Flight-viewer.html

<h3>Flights </h3>
<div >
    <ul class= "grid grid-pad">
        <a *ngFor="let flight of flights" class="col-1-4">
        <li class ="module flight" (click)="selectFlight(flight)" id="getFlight">
                <h4 tabindex ="0">{{flight.number}}</h4>
            </li>
        </a>
    </ul>
</div>


<div class="box" *ngIf="flightClicked">
    <!--<flight-selected [flight]="selectedFlight"></flight-selected>-->
          You have selected flight: {{selectedFlight.number}}<br>
          From: {{selectedFlight.origin}}<br>
          Leaving at: {{selectedFlight.departure || date }}<br>
          Going to: {{selectedFlight.destination}}<br>
          Arriving at: {{selectedFlight.arrival || date}}<br><br>
    <h3><span (click)="updateFlight(flight)">Update</span></h3>

</div>

<div *ngIf="flightToUpdate">
    <flight-update [flight]="flightToUpdate"
                   (onFlightUpdated)="updateFlight($event)"></flight-update>
</div>

飞行查看器.css:

   h3 {
    text-align: center;
    margin-bottom: 0;
}

h4:focus {
    position: relative;
    max-height: 120px;
    min-width: 170px;
    background-color:limegreen;
}

ul {
    width: 1600px;
    overflow-x: scroll;
    background: #ccc;
    white-space: nowrap;
    vertical-align: middle;

}
div
{
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
}

li {
    display: inline-block;
    /* if you need ie7 support */
    *display: inline;
    zoom: 1
}

.module {
    padding: 20px;
    text-align: center;
    color: #eee;
    max-height: 120px;
    min-width: 120px;
    background-color: #607D8B;
    border-radius: 2px;
}

.active {
    padding: 20px;
    text-align: center;
    color: #eee;
    max-height: 120px;
    min-width: 120px;
    background-color: #607D8B;
    border-radius: 2px;
    border: 5px solid #73AD21

}

.normal {
    padding: 20px;
    text-align: center;
    color: #eee;
    max-height: 120px;
    min-width: 120px;
    background-color: #607D8B;
    border-radius: 2px;
}
.module:hover {
    background-color: #EEE;
    cursor: pointer;
    color: #607d8b;
}

.box {
    text-align: center;
    margin-bottom: 0;
    margin: auto;
    width: 600px;
    position:absolute;
    top: 180px;
    right: 0;
    height: 100px;
    border: 5px solid #73AD21;
    text-align: center;
    display: inline-block;
}

基本上，我希望 .module 在被单击时具有不同的边框颜色。我尝试使用组件类中引用的 .active 和 .normal 类来实现它，但这不起作用。

我的应用是什么样子的:

基本上，我希望以灰色突出显示的整个框具有不同的边框颜色，而不仅仅是框内的一个小矩形具有不同的边框颜色。(我使用标签索引实现了这一点，但它还不够)

我将不胜感激任何帮助。干杯。

编辑:它现在突出显示该框，但当我关闭警告框时它消失了。我如何才能使绿色轮廓保持不变，直到我单击另一个框？干杯

Answer 1

你写的像:

document.getElementById("module").className = "active";

提供的 HTML 中没有元素为 id = "module"

//替换这个:

 <li class ="module flight" (click)="selectFlight(flight)">
                <h4 tabindex ="0">{{flight.number}}</h4>
            </li>

与

<li class ="module flight" (click)="selectFlight(flight)" id="getFlight">
                <h4 tabindex ="0">{{flight.number}}</h4>    </li>

然后尝试:

 document.getElementById("getFlight").className = "active";