La función selection.classed() se usa para establecer la clase en el elemento seleccionado. Esta función también se puede usar para desarmar la clase a un elemento particular que está seleccionado.
Sintaxis:
selection.classed(names[, value]);
Parámetros: La función dada arriba toma dos parámetros que se dan arriba y se describen a continuación:
- name: Es el nombre de la clase que se le dará al elemento que se seleccione.
- valor: Es el valor booleano, es decir, verdadero o falso para activar o desactivar la clase.
Valores devueltos: esta función no devuelve nada.
Ejemplo 1: Establecer el nombre de la clase.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" path1tent="width=device-width,
initial-scale=1.0">
<script src="https://d3js.org/d3.v4.min.js">
</script>
</head>
<body>
<div>
<a>GeeksforGeeks</a>
</div>
<script>
// Sets the class to the a tag
var a = d3.select("a")
.classed("className", true);
// This will select the anchor tag
var divselect = document.querySelector(".className");
console.log(divselect.innerHTML);
</script>
</body>
</html>
Producción:
GeeksforGeeks
Ejemplo 2: Desestablecer el nombre de la clase.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" path1tent="width=device-width,
initial-scale=1.0">
<script src="https://d3js.org/d3.v4.min.js">
</script>
</head>
<body>
<div>
<p class="classGiven classGiven2">
GeeksforGeeks
</p>
</div>
<script>
// Unsets the class named classGiven
// to the "p" tag
var a = d3.select("p")
.classed("classGiven2", false);
// This will select the "p" tag
var divselect = document
.querySelector(".classGiven");
console.log(divselect.innerHTML);
// This will not select the "p" tag
// As the classGiven 2 is unset
var divselect = document
.querySelector(".classGiven2");
console.log(divselect);
</script>
</body>
</html>
Producción:
GeeksforGeeks null