Kenarlık Sınıfı
Örnek
<div class="container">
<span class="border bg-light m-5 d-inline-block"></span>
<span class="border bg-light m-5 d-inline-block"></span>
<div id="Cssi" class="bg-info-subtle mt-5 border p-3 rounded-3"></div>
<form>
<select class="form-select" aria-label="Default select example" id="Secimci">
<option>Lütfen seçiniz</option>
<option>bg-black</option>
<option>border</option>
<option value="">borderless</option>
<option>border-top</option>
<option>border-start</option>
<option>border-end</option>
<option>border border-bottom-0</option>
<option>border border-warning</option>
<option>border border-warning-subtle</option>
<option>border border-success border-opacity-25</option>
<option>border border-5</option>
<option>rounded-bottom</option>
<option>rounded-top</option>
<option>rounded-end</option>
<option>rounded-5</option>
<option>rounded-circle</option>
<option>rounded-pill</option>
<option>rounded-5 rounded-top-0</option>
<option>rounded-end-circle</option>
</select>
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="KlasaEkle" checked>
<label class="form-check-label" for="checkChecked">
Class'a Birleştir
</label>
</div>
</form>
</div>
</body>
</html>
<script src="bootstrap-5.3.5-dist/js/bootstrap.bundle.min.js"></script>
<script>
document.querySelector("#Secimci").addEventListener('change', function (Secici) {
const OptionDegeri = this.value;
const Ekle = document.querySelector("#KlasaEkle").checked ? true : false;
document.querySelectorAll("span").forEach(function (Hedef) {
Hedef.className = Ekle ? Hedef.className + " bg-light m-5 d-inline-block " + OptionDegeri : "bg-light m-5 d-inline-block " + OptionDegeri;
document.querySelector("#Cssi").innerHTML=Hedef.className;
});
});
</script>
