1

Есть div с классами text и clicked

var borderw = document.getElementsByClassName('text clicked');
    function borderWidth() {
      borderw.style.borderWidth = "10px";
    }
.text.clicked {
  border-color: rgb(255, 0, 0);
}
<div class="text clicked">XXX</div>
<button type="button" name="button" onclick="borderWidth();" >Click</button>

Как выбрать через getElementsByClassName() сразу два класса? Нужен для css, чтобы при нажатии на кнопку добавлялся border-width.

Пытался так сделать, ошибки не могу найти.

Спасибо.

1
  • Зачем два класса? Одного может быть достаточно. Еще нужно событие при котором сработает функция. Типа onclick или onload
    – nano.io
    14 авг 2018 в 8:18

3 ответа 3

4

Используйте лучше document.querySelectorAll

const borderw = document.querySelectorAll('.text.clicked');
const button = document.querySelector('button'); // вернет только один элемент!

// querySelectorAll вернет коллецию, не настоящий массив!
// поэтому с помощью [...] превращаем его в настоящий массив
function borderWidth() {
  // так как borderw массив, то что бы стили сработали
  // нужно в цикле пройтись по каждому элементу и ему присвоить стили
  [...borderw].forEach(el => el.style.borderWidth = "10px");
}

button.addEventListener('click', borderWidth);
div {
  border-color: black;
  border-style: solid;
  border-width: 0px;
}
<div class="text clicked">XXX</div>
<button>Click</button>

2
  • Спасибо, а через onclick="borderWidth(); как использовать? Вопрос чуток отредактировал
    – Andrey Z.
    14 авг 2018 в 8:32
  • @АндрейЗахаров обновил ответ
    – ThisMan
    14 авг 2018 в 8:54
0

Вполне можно обойтись одним КЛАССОМ, это во-первых. Во-вторых любую функцию надо запускать, в данном случае реализовано нажатием на сам блок. И последнее, элементов с КЛАССОМ может быть куча, или надо указать индекс или прокручивать в цикле

var borderw = document.getElementsByClassName('text')[0];

borderw.addEventListener('click', function borderWidth() {
  borderw.style.borderWidth = "10px";
})
.text {
  border: 1px solid red;
}
<div class="text clicked">XXX</div>

0

getElementsByClassName возвращает коллекцию элементов

var borderw = document.getElementsByClassName('text clicked');

for(var i = 0; i < borderw.length; i++){
	borderw[i].addEventListener('click', function(){
		this.style.borderWidth = "10px";
	});	
}
.text{
	border: 1px solid #ccc;
	margin-bottom: 5px;
}
<div class="text clicked">XXX</div>
<div class="text clicked">XXX</div>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.