Как изменить стиль только одного span, когда пробегаешься по ним с помощью getElementsByClassName?

Question

[kunjut19]

У меня есть плитка из мелких div'ов, внутри которых слова. Так как div'ы небольшие, то длинные слова в них не помещаются. Поэтому я решил немного уменьшать шрифт, если слово слишком длинное. Но проблема в том, что когда пробегаешься по всем этим плиткам и встречаешь такую, где слово длинное, то шрифт уменьшается у всех плиток (а мне нужно только у тех, в которых текст сверхдлинный).
javascript:

var tiles = document.getElementsByClassName('tile');
	for (var i=0; i<tiles.length; i++) {
		var textLength = tiles[i].textContent.length;
		var fontSize = window.getComputedStyle(tiles[i].querySelector('span')).fontSize;

	  if(textLength > 6) {
		  tiles[i].querySelector('span').style.fontSize = "0.6rem";
    } 
}

html:

<div class="tile">
    <span>жуткодлинноеслово</span>
</div>
<div class="tile">
    <span>дом</span>
</div>
<div class="tile">
    <span>река</span>
</div>

Как избежать подобного конфуза? И вообще, есть ли решение получше (в плане кода)?

Comments

[dmitry-toster]

говнокод редкостный. вы по каким источникам JavaScript изучаете? в любом случае забудьте про них

[kunjut19]

dmitry-toster, предложите получше

Answer 1

[Rsa97]

Comments

[kunjut19]

то, что нужно :) спасибо вам