Изменение стиля нескольких абзацев с одним и тем же id

@Eduardo_1992 · Регистрация: 08.05.2015

Студворк — интернет-сервис помощи студентам

Всем привет!
Мне нужно изменить стиль текста при нажатии на кнопку. Делаю это таким образом:

JavaScript
1
document.getElementById("toTopText").style.fontSize = "20px";

Всё работает, всё ОК. Но проблема в том, что у меня изменяется только один абзац со стилем "toTopText". У других задан такой же стиль, но они не изменяются. Получается так, что код получает первое совпадение и работает с ним, а на следующие он забивает... Как мне это исправить? Спасибо!

@Jetlag · 06.08.2015, 11:03

Eduardo_1992, код делает ровно то что Вы ему говорите. Получает элемент у которого установлен id "toTopText" и меняет ему стиль. Id, единственный и уникальный идентификатор элемента, других таких на странице быть не должно. Если вам нужно несколько элементов с одним и тем же стилем то назначайте его по классу а потом выбирайте их через querySelector/getElementsByClassName. А вообще так напрямую менять стиль из js - плохая практика. Все стили стоит описать в цсс а из кода уже вешать соответствующие классы

@Eduardo_1992 · 06.08.2015, 11:04 **[ТС]**

Jetlag, понял Вас. Спасибо!

@BANO · 06.08.2015, 11:13

Eduardo_1992, id на странице должен быть 1
в корне не правильный вопрос

@Eduardo_1992 · 06.08.2015, 11:23 **[ТС]**

BANO, сейчас приведу пример. Да, может быть я не верно сформулировал свою мысль. Вот:

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
function resizeBlock(element_id) {
    var userWidth = window.screen.width;
    if (userWidth > 500) {
        if (document.getElementById(element_id)) {
            document.getElementById(element_id).style.width = "400px";
            document.getElementById("toTop").style.height = "300px";
            document.getElementById("toTopText_head").style.fontSize = "25px";
            document.getElementById("toTopText1").style.fontSize = "20px";
            document.getElementById("toTopText2").style.fontSize = "20px";
            document.getElementById("toTopText3").style.fontSize = "20px";
            document.getElementById("toTopText4").style.fontSize = "20px";
            document.getElementById("toTopText5").style.fontSize = "20px";
        }
    }
}

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
#toTopText_head, #toTopText, #toTopText a {
    text-decoration: none;
    text-align: center;
    color: black;
    padding: 0px;
    margin: 0px;
}
#toTopText_head {
    font-size: 18px;
    margin-bottom: 5px;
}
#toTopText {
    font-size: 14px;
}
#toTop {
    padding: 0px;
    height: 130px !important;
}

HTML5
1
2
3
4
5
6
7
8
9
10
<div onclick="resizeBlock('toTop');" id="toTop" style="display: none; top: 0px; height: 100px; left: 50%;">
    <p align="center">
        <p id="toTopText_head">Контактная информация</p>
        <p id="toTopText">Единая справка: <a href="tel:+79888888888">8-888-888-88-88</a></p>
        <p id="toTopText">Автосервис: <a href="tel:+79888888888">8-888-888-88-88</a></p>
        <p id="toTopText">Автозапчасти: <a href="tel:+79888888888">8-888-888-88-88</a></p>
        <p id="toTopText">Авто разборка: <a href="tel:+79888888888">8-888-888-88-88</a></p>
        <p id="toTopText">Юрист <a href="tel:+79888888888">8-888-888-88-88</a></p>
    </p>
</div>

Добавлено через 5 минут
Изменить нужно "Единая справка", "Автосервис", "Автозапчасти", "Авто разборка", "Юрист". Но изменяется только "Единая справка".

@BANO · 06.08.2015, 11:26

Eduardo_1992, вы вместо id поставьте класс
или атрибут
ну положим

HTML5
1
2
3
4
5
6
7
8
9
10
<div onclick="resizeBlock('toTop');" id="toTop" style="display: none; top: 0px; height: 100px; left: 50%;">
    <p align="center">
        <p data-selector="toTopText_head">Контактная информация</p>
        <p data-selector="toTopText">Единая справка: <a href="tel:+79888888888">8-888-888-88-88</a></p>
        <p data-selector="toTopText">Автосервис: <a href="tel:+79888888888">8-888-888-88-88</a></p>
        <p data-selector="toTopText">Автозапчасти: <a href="tel:+79888888888">8-888-888-88-88</a></p>
        <p data-selector="toTopText">Авто разборка: <a href="tel:+79888888888">8-888-888-88-88</a></p>
        <p data-selector="toTopText">Юрист <a href="tel:+79888888888">8-888-888-88-88</a></p>
    </p>
</div>

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
function resizeBlock(element_id) {
    var userWidth = window.screen.width;
    if (userWidth > 500) {
        if (document.getElementById(element_id)) {
            document.getElementById(element_id).style.width = "400px";
            document.getElementById("toTop").style.height = "300px";
            document.getElementById("toTopText_head").style.fontSize = "25px";
            [].forEach.call(document.querySelectorAll("[data-selector='toTopText']"),function(a){
                "use strict";
                a.style.fontSize = "20px"
            })
        }
    }
}

@Eduardo_1992 · 06.08.2015, 11:36 **[ТС]**

BANO, спасибо! Помогло! И получился достаточно компактный код!

Новые блоги и статьи Все статьи Все блоги /
Уведомление о неверно выбранном значении справочника Maks 06.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "НарядПутевка", разработанного в конфигурации КА2. Задача: уведомлять пользователя, если в документе выбран неверный склад. . .	Установка Qt Creator для C и C++: ставим среду, CMake и MinGW без фреймворка Qt 8Observer8 05.04.2026 Среду разработки Qt Creator можно установить без фреймворка Qt. Есть отдельный репозиторий для этой среды: https:/ / github. com/ qt-creator/ qt-creator, где можно скачать установщик, на вкладке Releases:. . .	AkelPad-скрипты, структуры, и немного лирики.. testuser2 05.04.2026 Такая программа, как AkelPad существует уже давно, и также давно существуют скрипты под нее. Тем не менее, прога живет, периодически что-то не спеша дополняется, улучшается. Что меня в первую очередь. . .	Отображение реквизитов в документе по условию и контроль их заполнения Maks 04.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "ПланированиеСпецтехники", разработанного в конфигурации КА2. Данный документ берёт данные из другого нетипового документа. . .
Фото всей Земли с борта корабля Orion миссии Artemis II kumehtar 04.04.2026 Это первое подобное фото сделанное человеком за 50 лет. Снимок называют новым вариантом легендарной фотографии «The Blue Marble» 1972 года, сделанной с борта корабля «Аполлон-17». Новое фото. . .	Вывод диалогового окна перед закрытием, если документ не проведён Maks 04.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "СписаниеМатериалов", разработанного в конфигурации КА2. Задача: реализовать программный контроль на предмет проведения документа. . .	Программный контроль заполнения реквизитов табличной части документа Maks 02.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "СписаниеМатериалов", разработанного в конфигурации КА2. Задача: 1. Реализовать контроль заполнения реквизита. . .	wmic не является внутренней или внешней командой Maks 02.04.2026 Решение: DISM / Online / Add-Capability / CapabilityName:WMIC~~~~ Отсюда: https:/ / winitpro. ru/ index. php/ 2025/ 02/ 14/ komanda-wmic-ne-naydena/

@Jetlag 111 / 49 / 20 Регистрация: 21.10.2013 Сообщений: 212
	06.08.2015, 11:03
	Eduardo_1992, код делает ровно то что Вы ему говорите. Получает элемент у которого установлен id "toTopText" и меняет ему стиль. Id, единственный и уникальный идентификатор элемента, других таких на странице быть не должно. Если вам нужно несколько элементов с одним и тем же стилем то назначайте его по классу а потом выбирайте их через querySelector/getElementsByClassName. А вообще так напрямую менять стиль из js - плохая практика. Все стили стоит описать в цсс а из кода уже вешать соответствующие классы 1

@Eduardo_1992 7 / 8 / 5 Регистрация: 08.05.2015 Сообщений: 477
	06.08.2015, 11:04 [ТС]
	Jetlag, понял Вас. Спасибо! 0

@BANO Ренегат 1740 / 1085 / 386 Регистрация: 06.08.2014 Сообщений: 5,203 Записей в блоге: 1
	06.08.2015, 11:13
	Eduardo_1992, id на странице должен быть 1 в корне не правильный вопрос 0

@Eduardo_1992 7 / 8 / 5 Регистрация: 08.05.2015 Сообщений: 477
	06.08.2015, 11:36 [ТС]
	BANO, спасибо! Помогло! И получился достаточно компактный код! 0

Изменение стиля нескольких абзацев с одним и тем же id

Решение