Как я могу создать jquery скрипт с переменным кликом var btn1 css

Question

Привет, я хочу создать несколько кнопок, которые изменят css, как я могу это сделать, и щелкните по нему еще раз, чтобы отменить его

var btn = document.getElementById("btn");
var btn2 = document.getElementById("btn2");
var btn3 = document.getElementById("btn3");

<button id="btn">bold</button>
<button id="btn2">italic</button>
<button id="btn3">underline</button>
<div class="item-1"></div>

Answer 1

Вы можете использовать классы для переключения (do-undo) свойств.

Css:

.boldText{
font-weight:Bold;
}

var btn = document.getElementById("btn");
var btn2 = document.getElementById("btn2");
var btn3 = document.getElementById("btn3");
var txt = $('.item-1');
btn.onclick = function(){
txt.toggleClass('boldText')
}

.boldText{
font-weight:Bold;
}

<script src="https://code.jquery.com/jquery-3.5.0.min.js"></script>
<button id="btn">bold</button>
<button id="btn2">italic</button>
<button id="btn3">underline</button>
<div class="item-1">test Text</div>

Вы также можете добавить itali c и подчеркнуть подчеркивание.

Answer 2

Если вы хотите сделать это надлежащим образом, вам нужно использовать метод jquery toggleClass(), как показано ниже

$(document).ready(function(){

$("#btn").click(function(){
  $(".item-1").toggleClass("red");
});

$("#btn2").click(function(){
  $(".item-1").toggleClass("blue");
});

$("#btn3").click(function(){
  $(".item-1").toggleClass("green");
});
});

.red
{
color:red;
}
.blue
{
color:blue;
}

.green
{
color:green;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="btn">red</button>
<button id="btn2">blue</button>
<button id="btn3">Green</button>
<br>
<div class="item-1">color</div>