資料結構
網路
關係資料庫管理系統 (RDBMS)
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C語言程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會研究
時尚研究
法律研究點選元素時新增類名，點選元素外部時移除類名
有時，我們需要在點選HTML元素時高亮顯示它，並在點選HTML元素外部時使其恢復正常。我們可以透過切換元素的類來實現。這裡，切換類的意思是新增和移除類。
在本教程中，我們將學習如何在使用者點選元素時向元素新增類名，以及如何在使用者點選元素外部時從元素中移除類名。
使用add()和remove()方法在點選元素內部和外部時切換類
在JavaScript中，add()方法用於向陣列新增元素，remove()方法用於從陣列中移除元素。在這裡，我們將訪問特定HTML元素的classList，它是一個數組。此外，我們將使用add()和remove()方法以及classList來向HTML元素新增和移除類。
語法
使用者可以按照以下語法使用add()和remove()方法，在使用者點選元素時新增類，在使用者點選元素外部時移除類。
box.addEventListener('click', function () {
//Add class
});
document.addEventListener('click', function (event) {
if (event.target !== targeted_element)
// Remove class
});
在上面的語法中，我們在使用者點選框時向classList新增一個類，如果使用者點選元素外部，則移除該類。
示例1
在下面的示例中，我們有一個帶有“box”類名的div元素。我們使用CSS為“box”類應用了一些樣式。此外，我們還在“inner”類中添加了一些CSS屬性。
在JavaScript中，當用戶點選該框時，我們將“inner”類新增到box元素。此外，我們還在網頁上添加了點選事件。在回撥函式中，我們檢查目標元素是否為box。我們不從box中移除“inner”類；否則，我們將從box中移除“inner”類。
<html>
<head>
<style>
.inner {
width: 450px;
height: 200px;
background-color: red !important;
color: white !important;
padding: 10px;
border-radius: 5px;
font-size: 30px !important;
font-weight: bold;
text-align: center;
}
.box {
width: 500px;
height: 200px;
border: 2px solid green;
color: blue;
font-size: 1rem;
}
</style>
</head>
<body>
<h3> Toggling the class using the <i> add() and remove() </i> method of JavaScript </h3>
<div class = "box"> Click on and out the button to toggle the class. </div>
<script>
var box = document.querySelector('.box');
//Add 'inner' class when users click on the box
box.addEventListener('click', function () {
box.classList.add('inner');
});
//Remove the 'inner' class when users click outside the box
document.addEventListener('click', function (event) {
if (event.target !== box)
box.classList.remove('inner');
});
</script>
</body>
</html>
示例2
在HTML中，當您點選輸入框時，它會高亮顯示輸入框，當您點選輸入框外部時，它會移除輸入框的高亮顯示。
在下面的示例中，我們將建立一個自定義輸入框，當用戶點選輸入框時可以高亮顯示。
在這裡，當用戶點選div元素時，我們將“active”類新增到div元素，當用戶點選輸入框外部時，我們將移除“active”類。
<html>
<head>
<style>
.input {
width: 400px;
height: 30px;
border: 1px solid grey;
color: grey;
padding: 5px;
}
.active {
border: 2px solid blue !important;
color: blue;
}
</style>
</head>
<body>
<h3> Toggling the class using the <i> add() and remove() </i> method of JavaScript </h3>
<div class = "input"> Enter your name </div>
<script>
var input = document.querySelector('.input');
input.addEventListener('click', function () {
input.classList.add('active');
});
document.addEventListener('click', function (event) {
if (event.target !== input)
input.classList.remove('active');
});
</script>
</body>
</html>
使用toggleClass()方法
toggleClass()方法允許使用者向HTML元素新增和移除類。在這裡，我們將向元素新增類，當用戶點選元素時，並在使用者點選元素外部時移除類。
語法
使用者可以按照以下語法使用toggleClass()方法向元素新增和移除類。
initial.classList.toggle('clicked');
在上面的語法中，“initial”是在JavaScript中訪問的HTML元素。它向HTML元素新增和移除“clicked”類。
步驟
步驟1 - 定義“clickInside”和“clickOutside”變數，並分別將其初始化為true和false值。
步驟2 - 在JavaScript中訪問div元素並新增一個點選事件監聽器。
步驟3 - 在事件監聽器的回撥函式中，如果“clickInside”為false，則表示使用者上次點選了外部。因此，我們需要使用toggleClass()方法向div元素新增“clicked”類。
步驟4 - 將“clickInside”變數的值更改為true，“clickOutside”變數的值更改為false。
步驟5 - 向HTML文件新增一個點選事件監聽器。在這裡，如果“clickoutside”變數的值為false，並且目標元素不是初始div，則使用toggleClass()方法從div元素中移除“clicked”類。
步驟6 - 將“clickOutside”變數的值更改為true，“clickInside”變數的值更改為false。
示例3
在下面的示例中，我們使用了上面解釋的自定義演算法，在使用者點選類時向HTML元素新增類，並在使用者使用toggleClass()方法點選外部時從HTML元素中移除類。
在輸出中，使用者可以觀察到它改變了尺寸和字型顏色。當他們點選div元素時，以及當用戶點選div元素外部時，它會使其恢復正常。
<html>
<head>
<style>
.initial {
width: 400px;
height: 250px;
border: 1px solid grey;
color: grey;
padding: 5px;
font-size: 3rem;
}
.clicked {
color: red !important;
border: 1px solid red !important;
width: 500px;
height: 200px;
}
</style>
</head>
<body>
<h2> Toggling the class using the <i> toggleClass() </i> method of JavaScript </h2>
<div class = "initial">This is a clickable div </div>
<script>
var initial = document.querySelector('.initial');
// initial values of clickable variables
var clickedInside = false;
var clickedOutside = true;
initial.addEventListener('click', function () {
if (!clickedInside) {
initial.classList.toggle('clicked');
clickedInside = true;
clickedOutside = false;
}
});
document.addEventListener('click', function (event) {
if (event.target !== initial && !clickedOutside) {
initial.classList.toggle('clicked');
clickedInside = false;
clickedOutside = true;
}
});
</script>
</body>
</html>
使用者學習瞭如何使用各種方法在點選元素時向元素新增類，並在點選元素外部時從元素中移除類。在第一種方法中，我們使用了add()和remove()方法。在第二種方法中，我們使用了toggleClass()方法。
6000+ 次瀏覽
