Увеличить, уменьшить текст нажатием на него Задать вопрос
Добрый день всех с наступающим! Помогите решить задачу, а именно создать условие, сейчас при нажатии на Текст 1 он у нас увеличивается и окрашивается, также нужно сделать и для Текст 2. Но если один из span у нас уже увеличен, то при нажатии на следующий, предыдущий должен принять исходное значение. Таких span будет около сотни.
<span id="big">Текст 1.</span><br> <span id="big">Текст 2.</span><br>
var span = document.querySelector('#big');
span.onclick = function(){
span.style.fontSize = '13pt';
span.style.fontWeight = 'bold';
span.style.background = '#D9FFAD';
}
|
olegan4eg88,
id уникально, используйте класс. |
ID - уникальный идентификатор.
<div class="spans-container">
<span>Текст 1.</span><br>
<span>Текст 2.</span><br>
</div>
<style>.spans-container span.highlighted{font-size:13pt;font-weight:bold;background:#D9FFAD;}</style>
<script>
const container = document.querySelector('.spans-container');
const activeClass = 'highlighted';
container.addEventListener('click', function(e) {
const target = e.target;
if (!target || target.tagName.toLowerCase() !== 'span')
return;
if (target.classList.contains(activeClass))
return void target.classList.remove(activeClass);
const activeElement = container.querySelector('.' + activeClass);
if (activeElement)
activeElement.classList.remove(activeClass);
target.classList.add(activeClass);
});
</script>
|
Nexus,
:)
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
.big.up {
font-size: 13pt;
background-color: #D9FFAD;
font-weight: bold;
}
</style>
<script>
addEventListener("click", function (e) {
var target = e.target;
if (target && target.classList.contains("big")) {
var up = document.querySelector('.up');
if (up && up != target) up.classList.remove("up");
target.classList.toggle("up")
}
}
);
</script>
</head>
<body>
<span class="big">Текст 1.</span><br>
<span class="big">Текст 2.</span><br>
<span class="big">Текст 1.</span><br>
<span class="big">Текст 2.</span><br>
</body>
</html>
|
| Часовой пояс GMT +3, время: 13:54. |