Как задать стиль к содержимому textContent?

Question

Есть код:

const container = document.getElementById('container');

function makeCounter() {
  let currentCount = 1;

  return function() {
    return currentCount++;
  };
}

counter = makeCounter();

function randomCoin() {
  return (Math.floor(Math.random() * 2) === 0);
}

function onAddButtonClick() {
  let random = randomCoin();
  if (random == true) {
    addButton('create');
  } else {
    addButton('delete');
  }
};

function onDeleteButtonClick() {
  while (container.children.length > 1) {
    container.removeChild(container.lastChild);
  }
};

function addButton(buttonType) {
  const button = document.createElement('div');
  if (buttonType == 'create') {
    button.classList.add('create-button', 'buttons');
    button.textContent = 'Create ' + counter();
    button.addEventListener('click', onAddButtonClick);
  } else if (buttonType == 'delete') {
    button.classList.add('delete-button', 'buttons');
    button.textContent = 'Delete';
    button.addEventListener('click', onDeleteButtonClick);
  }
  container.appendChild(button);
};

addButton('create');

body {
  text-align: center;
}

div {
  border-radius: 5px;
  padding: 20px;
  line-height: 1.5;
  margin: 30px;
}

.buttons {
  font-size: 18px;
  cursor: pointer;
  width: 200px;
  margin: 30px auto;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}

.create-button {
  border: 1px solid #00ad5c;
  color: #00ad5c;
}

.create-button:hover {
  background: #00ad5c;
  color: white;
  transition: all 1s;
}

.delete-button {
  border: 1px solid #75002d;
  color: #75002d;
}

.delete-button:hover {
  background: #75002d;
  color: white;
  transition: all 1s;
}

#delete-button {
  display: none;
}

#message {
  border-radius: 50px;
  width: 450px;
  height: 65px;
  margin: 30px auto;
  background: #eee;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}

<div id="container"></div>

Функция "addButton" отвечает за создание кнопки, а функция "counter" грубо говоря нумерует кнопки. Текст и нумерация появляется прямо по центру кнопок. Мне необходимо номер кнопок вывести спрва в нижнем углу.

Я так понимаю, что нужно работать с этой частью:

"button.textContent = 'Create ' + counter();"

Что можно сделать?

Answer 1

Не знаю, чем обусловлено горячее желание вставлять текст именно через textContent и при этом, используя JavaScript, не сформировать динамически нужную разметку, но всё можно "закостылить" ;-)

Добавляем к созданной кнопке data-атрибут с нужным номером, а в CSS создаем у блока кнопки псевдоэлемент ::after в content которого получаем значение вышеуказанного атрибута. Таким образом, мы не лезем в HTML-разметку, но можем стилизовать отдельно текст и номер, с помощью CSS:

const container = document.getElementById('container');

function makeCounter() {
  let currentCount = 1;

  return function() {
    return currentCount++;
  };
}

counter = makeCounter();

function randomCoin() {
  return (Math.floor(Math.random() * 2) === 0);
}

function onAddButtonClick() {
  let random = randomCoin();
  if (random == true) {
    addButton('create');
  } else {
    addButton('delete');
  }
};

function onDeleteButtonClick() {
  while (container.children.length > 1) {
    container.removeChild(container.lastChild);
  }
};

function addButton(buttonType) {
  const button = document.createElement('div');
  if (buttonType == 'create') {
    button.classList.add('create-button', 'buttons');
    button.textContent = 'Create';
    // Добавляем пользовательский атрибут data-num
    // и заносим в него значение counter()
    button.setAttribute('data-num', counter());
    button.addEventListener('click', onAddButtonClick);
  } else if (buttonType == 'delete') {
    button.classList.add('delete-button', 'buttons');
    button.textContent = 'Delete';
    button.addEventListener('click', onDeleteButtonClick);
  }
  container.appendChild(button);
};

addButton('create');

body {
  text-align: center;
}

div {
  border-radius: 5px;
  padding: 20px;
  line-height: 1.5;
  margin: 30px;
}

.buttons {
  font-size: 18px;
  cursor: pointer;
  width: 200px;
  margin: 30px auto;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}

.create-button {
  border: 1px solid #00ad5c;
  color: #00ad5c;
  /* добавлено */
  position: relative;
}

  /* добавлено */
.create-button::after {
  /* Получаем значение атрибута data-num */
  content: attr(data-num);
  position: absolute;
  display: inline-block;
  bottom: 0px;
  right: 5px;
}

.create-button:hover {
  background: #00ad5c;
  color: white;
  transition: all 1s;
}

.delete-button {
  border: 1px solid #75002d;
  color: #75002d;
}

.delete-button:hover {
  background: #75002d;
  color: white;
  transition: all 1s;
}

#delete-button {
  display: none;
}

#message {
  border-radius: 50px;
  width: 450px;
  height: 65px;
  margin: 30px auto;
  background: #eee;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}

<div id="container"></div>

БЛОГ НА HUSL

Как задать стиль к содержимому textContent?

Ответы (1 шт):