Я делаю несколько кнопок с вычитанием и добавлением символов, я хочу, чтобы область, в которой они могут быть нажаты, была точно видимой областью символа, но поскольку у меня довольно большой размер шрифта, событие onclick происходит даже в пустых местах рядом с символами, я пытался уменьшить высоту строки, а также пытался уменьшить высоту и ширину div, содержащего кнопки, но ничего не работает.

PS: Возможно, я смогу исправить это, используя SVG вместо текста, но сначала хотелось бы узнать, есть ли решение с использованием текста.

Пример того, что происходит:

var counter = document.getElementById("counter")
counter = 1;

function subtract() {
  counter -= 1;
  if (counter <= 0) {
    counter = 0;
  }
  document.getElementById("counter").innerHTML = counter;
}

function add() {
  counter += 1;
  if (counter >= 10) {
    counter = 10;
  }
  document.getElementById("counter").innerHTML = counter;
}
@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

* {
  user-select: none;
  margin: 0;
  padding: 0;
}

body {
  background-color: #1B5389;
  color: #e6e6e6;
  font-family: 'Poppins', Arial, Helvetica, sans-serif;
}

#counter {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 160px;
  font-weight: 600;
}

.buttons {
  font-size: 150px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: 130px;
  left: 0;
  right: 0;
}

.buttons span {
  margin: 0 10px;
  cursor: pointer;
  background-color: #50fa785b; /* To show the whole area that is clickable */
}
<body>
  <div id="counter">1</div>
  <div class="buttons">
    <span onclick="subtract()" class="del">-</span>
    <span onclick="add()" class="add">+</span>
  </div>
</body>

Видите всю зеленую область, на которую можно кликнуть? Это именно то, чего я не хочу, то, что я хочу, чтобы было кликабельно, - это именно размер символов, например:

0
Keving Andrades 21 Янв 2022 в 10:08
1
Используйте line-height: 0.7 в .buttons классе div
 – 
Minal Chauhan
21 Янв 2022 в 10:11
Визуально высота строки уменьшилась, но область клика осталась точно такой же высоты i.imgur.com/YkXTEXD. png
 – 
Keving Andrades
21 Янв 2022 в 10:32
Добавьте overflow: hidden; к .buttons с line-height redus
 – 
Lalji Tadhani
21 Янв 2022 в 10:51

5 ответов

Я думаю, вы слишком много думаете об этом. Оберните его в элемент div с вашим собственным классом, который указывает размер в CSS. Конечно, на самом деле вы нажимаете на div, а не на спаны. Я полагаю, кнопки + - ... должны быть одинакового размера, верно?

divClass
 {
  width: 30px;
  height: 30px 
 }
0
Jan Lacina 21 Янв 2022 в 10:14
Это не сработало, событие onclick находится в промежутках, а не в div. С divClass { width: 30px; height: 30px } интерактивная область остается неизменной, даже если я изменяю размер каждого диапазона с высотой и шириной или с высотой строки, это то же самое
 – 
Keving Andrades
21 Янв 2022 в 10:53
var counter = document.getElementById("counter")
counter = 1;

function subtract() {
  counter -= 1;
  if (counter <= 0) {
    counter = 0;
  }
  document.getElementById("counter").innerHTML = counter;
}

function add() {
  counter += 1;
  if (counter >= 10) {
    counter = 10;
  }
  document.getElementById("counter").innerHTML = counter;
}
@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

* {
  user-select: none;
  margin: 0;
  padding: 0;
}

body {
  background-color: #1B5389;
  color: #e6e6e6;
  font-family: 'Poppins', Arial, Helvetica, sans-serif;
}

#counter {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 160px;
  font-weight: 600;
}

.buttons {
  font-size: 150px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: absolute;
  top: 130px;
  left: 0;
  right: 0;
}

.buttons span {
  margin: 0 10px;
  cursor: pointer;
  background-color: #50fa785b; /* To show the whole area that is clickable */
}
<body>
  <div id="counter">1</div>
  <div class="buttons">
    <span onclick="subtract()" class="del">-</span>
    <span onclick="add()" class="add">+</span>
  </div>
</body>
0
Manoj Tolagekar 21 Янв 2022 в 10:18
Фрагмент кода запуска может помочь вам в этом
 – 
Manoj Tolagekar
21 Янв 2022 в 10:19

Вы можете изменить размер в классе кнопки. Свойство font-size: . И добавьте gap: n px в класс кнопки.

.buttons {
  font-size: 150px; // change it to 30px maybe
  ...
  gap: 90px;
}

Рабочий пример:

var counter = document.getElementById("counter")
counter = 1;

function subtract() {
  counter -= 1;
  if (counter <= 0) {
    counter = 0;
  }
  document.getElementById("counter").innerHTML = counter;
}

function add() {
  counter += 1;
  if (counter >= 10) {
    counter = 10;
  }
  document.getElementById("counter").innerHTML = counter;
}
@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

* {
  user-select: none;
  margin: 0;
  padding: 0;
}

body {
  background-color: #1B5389;
  color: #e6e6e6;
  font-family: 'Poppins', Arial, Helvetica, sans-serif;
}

#counter {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 160px;
  font-weight: 600;
}

.buttons {
  font-size: 35px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: 90px;
  left: 0;
  right: 0;
  gap: 90px;
}

.buttons span {
  margin: 0 10px;
  padding: 10px;
  cursor: pointer;
  background-color: #50fa785b; /* To show the whole area that is clickable */
}
<body>
  <div id="counter">1</div>
  <div class="buttons">
    

<span onclick="subtract()" class="del">-</span>
    <span onclick="add()" class="add">+</span>
  </div>
</body>
0
Maik Lowrey 21 Янв 2022 в 10:20
var counter = document.getElementById("counter") бесполезен.
 – 
connexo
21 Янв 2022 в 10:57

Если вы хотите сохранить текущую структуру HTML, вы можете просто сократить высоту строки и увеличить значение top, чтобы символы располагались вертикально:

var counter = document.getElementById("counter")
counter = 1;

function subtract() {
  counter -= 1;
  if (counter <= 0) {
    counter = 0;
  }
  document.getElementById("counter").innerHTML = counter;
}

function add() {
  counter += 1;
  if (counter >= 10) {
    counter = 10;
  }
  document.getElementById("counter").innerHTML = counter;
}
@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
* {
  user-select: none;
  margin: 0;
  padding: 0;
}

body {
  background-color: #1B5389;
  color: #e6e6e6;
  font-family: 'Poppins', Arial, Helvetica, sans-serif;
}

#counter {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 160px;
  font-weight: 600;
}

.buttons {
  font-size: 150px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: 200px;
  left: 0;
  right: 0;
  line-height: 90px;
}

.buttons span {
  margin: 0 10px;
  cursor: pointer;
  background-color: #50fa785b;
  /* To show the whole area that is clickable */
}
<body>
  <div id="counter">1</div>
  <div class="buttons">
    <span onclick="subtract()" class="del">-</span>
    <span onclick="add()" class="add">+</span>
  </div>
</body>
0
A Haworth 21 Янв 2022 в 10:25
В Выполнить фрагмент кода он показывает только то, что мне не нужно, каждую кнопку можно нажимать за пределами зеленой области, и это то, чего я не хочу, я хочу, чтобы можно было щелкнуть только зеленую область без необходимость изменить размер шрифта
 – 
Keving Andrades
21 Янв 2022 в 10:58
var counter = document.getElementById("counter") бесполезен.
 – 
connexo
21 Янв 2022 в 10:58

Хакерское решение может работать так:

let counter = 1;

function subtract() {
  counter -= 1;
  if (counter <= 0) {
    counter = 0;
  }
  document.getElementById("counter").textContent = counter;
}

function add() {
  counter += 1;
  if (counter >= 10) {
    counter = 10;
  }
  document.getElementById("counter").textContent = counter;
}
@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
* {
  user-select: none;
  margin: 0;
  padding: 0;
}

body {
  background-color: #1B5389;
  color: #e6e6e6;
  font-family: 'Poppins', Arial, Helvetica, sans-serif;
}

.counter-container {
  display: grid;
  font-size: 150px;
  place-content: center;
  place-items: center;
  margin-top: 130px;
  column-gap: 10px;
  grid-template-areas:
    "counter counter"
    "minus      plus";
  grid-template-rows: auto 50px;
  margin: 0 auto;
  width: 170px;
}

.counter-container span {
  cursor: pointer;
  background-color: #50fa785b;
  position: relative;
  overflow: hidden;
  height: 80px;
  width: 80px;
}

.counter-container span::after {
  right: 0;
  position: absolute;
  top: -70px;
}

#counter { grid-area: counter; };

.del { grid-area: minus; }
.add { grid-area: plus; }

.del::after { content: "-"; left: 0; }
.add::after { content: "+"; left: -11px; }
<div class="counter-container">
  <div id="counter">1</div>
  <span onclick="subtract()" class="del"></span>
  <span onclick="add()" class="add"></span>
</div>
0
connexo 21 Янв 2022 в 10:57