Форум программистов, компьютерный форум, киберфорум
JavaScript
Войти
Регистрация
Восстановить пароль
Блоги Сообщество Поиск Заказать работу  
 
Рейтинг 4.57/7: Рейтинг темы: голосов - 7, средняя оценка - 4.57
11 / 24 / 6
Регистрация: 05.01.2012
Сообщений: 476

Замена фона во вложенных блоках

21.01.2016, 14:47. Показов 1361. Ответов 15
Метки нет (Все метки)

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

Есть такой код, он работает:

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<DIV id=bor style="border: 0px solid #ff0000; width: 300">
    <DIV style="border: 5px solid #12ff00; height: 100"></DIV> 
    <DIV style="border: 5px solid #558dff"><DIV style="border: 5px solid #ff55f5; height: 100"></DIV></DIV>
    <DIV><TT style="display: block; border: 5px solid #000000; width: 200; height: 100; background: #ffffff"></TT></DIV>
    </DIV> 
 
 
<SCRIPT>
 
document.body.onmousemove=function move(e) {
    e = e || event
    var target = e.target || e.srcElement
    var id=target.id
    if ( target.tagName == 'TT')  { target.style.background='ff0000'; }
    else { } }
 
    </SCRIPT>
Надо переделать так, чтобы фон блока ТТ менялся при наведении указателя не только на сам блок ТТ, но и в пределах всего блока id=bor.

Добавлять иды, классы и пр. нельзя.

Подсказки давать желательно со знаками препинания, ибо я в синтаксисе дуб.

Про гуглёж и яндексёж я знаю, .

Спасибо.
0
Лучшие ответы (1)
IT_Exp
Эксперт
34794 / 4073 / 2104
Регистрация: 17.06.2006
Сообщений: 32,602
Блог
21.01.2016, 14:47
Ответы с готовыми решениями:

Отступы во вложенных блоках div
Доброго времени суток! Столкнулся с такой проблемой: два блока, один вложен в другой: &lt;!DOCTYPE html&gt; &lt;html&gt; ...

Лишние отступы в блоках в блоках
Вот что у меня сейчас: Вот html код: &lt;!DOCTYPE html&gt; &lt;head&gt; &lt;meta charset=&quot;utf-8&quot;&gt; &lt;title&gt;Автоматизированные информационные...

Замена фона в C++
У меня есть консольное приложение, как поменять в нем фон что бы выводило вместо сетки глубины - зеленый фон.

15
 Аватар для whiteapps
414 / 379 / 220
Регистрация: 18.07.2014
Сообщений: 1,259
21.01.2016, 15:03
nikipor,
JavaScript
1
2
3
bor.onmousemove=function() {
    this.style.background='ff0000';
}
1
11 / 24 / 6
Регистрация: 05.01.2012
Сообщений: 476
21.01.2016, 16:03  [ТС]
Спасибо, но это немного не то. Мне надо, чтобы менялся фон только блока ТТ.
0
353 / 34 / 7
Регистрация: 02.07.2008
Сообщений: 311
21.01.2016, 17:46
так работает, исправьте синтаксические ошибки в коде html

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
 
</head>
<body>
    <DIV id="bor" style="border: 0px solid #ff0000; width: 300">
    <DIV style="border: 5px solid #12ff00; height: 100"></DIV> 
    <DIV style="border: 5px solid #558dff"><DIV style="border: 5px solid #ff55f5; height: 100"></DIV></DIV>
    <DIV><tt style="display: block; border: 5px solid #000000; width: 200; height: 100; background: #ffffff;"></tt></DIV>
    </DIV> 
    <script>
        document.body.onmousemove=function move(e) {
        e = e || event;
        var target = e.target || e.srcElement;
        var id=target.id;
        if ( target.tagName == 'TT')  {
            target.style.background='#ff0000'; 
        }
        else { 
        } 
    }
    </script>
</body>
</html>
Добавлено через 2 минуты
то что цвет в браузере не меняется это скорее всего из затого что это не стандартный элемент и у него всегда bg=black. Смотрите в отладчике.

Добавлено через 11 минут
Цитата Сообщение от like-nix Посмотреть сообщение
то что цвет в браузере не меняется это скорее всего из затого что это не стандартный элемент и у него всегда bg=black. Смотрите в отладчике.
Про не стандартный элемент фигню написал =)

Добавлено через 1 минуту
Он не поддерживается в html5=)

Добавлено через 3 минуты
вот так прекрасно работает =)

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
 
</head>
<body>
    <DIV id="bor" style="border: 0px solid #ff0000; width: 300">
    <DIV style="border: 5px solid #12ff00; height: 100"></DIV> 
    <DIV style="border: 5px solid #558dff"><DIV style="border: 5px solid #ff55f5; height: 100"></DIV></DIV>
    <DIV><tt style="display: block; width: 200; height: 100; background: #ffffff;">sdsd</tt></DIV>
    </DIV> 
    <script>
        document.body.onmousemove=function move(e) {
        e = e || event;
        var target = e.target || e.srcElement;
        var id=target.id;
        if ( target.tagName == 'TT')  {
            target.style.background='#ff0000'; 
        }
        else { 
        } 
    }
    </script>
</body>
</html>
Добавлено через 7 минут
Да и для width с height поставьте единицы измерения в CSS в отличие от HTML это обязательно.
1
11 / 24 / 6
Регистрация: 05.01.2012
Сообщений: 476
21.01.2016, 17:48  [ТС]
like-nix,

я не вижу отличий моего скрипта от Вашего. Смотрите внимательно,

Цитата Сообщение от nikipor Посмотреть сообщение
Надо переделать так, чтобы фон блока ТТ менялся при наведении указателя не только на сам блок ТТ, но и в пределах всего блока id=bor.
0
353 / 34 / 7
Регистрация: 02.07.2008
Сообщений: 311
21.01.2016, 17:59
А что значит?

Цитата Сообщение от nikipor Посмотреть сообщение
но и в пределах всего блока id=bor.
Добавлено через 6 минут
Посмотрел внимательно

JavaScript
1
target.style.background='#ff0000';
У вас без решетки

Добавлено через 2 минуты
То есть задача как только мы залезаем мышкой в блок bor bg меняется?
0
11 / 24 / 6
Регистрация: 05.01.2012
Сообщений: 476
21.01.2016, 18:13  [ТС]
Фиг с ней, с решёткой, у меня и так работает, это не существенно. Мне нужно менять фон ТТ при наведении на bor
0
353 / 34 / 7
Регистрация: 02.07.2008
Сообщений: 311
21.01.2016, 18:49
так пойдет

JavaScript
1
2
3
4
5
6
7
8
    document.body.onmouseover=function move(e) {
 
        var elements = document.body.getElementsByTagName('tt');
        for (var i = 0; i < elements.length; i++) {
            var tt = elements[i];
            tt.style.background='#ff0000'; 
        }
    }
0
11 / 24 / 6
Регистрация: 05.01.2012
Сообщений: 476
21.01.2016, 18:59  [ТС]
Не пойдёт, . Отсутствует указание на элемент bor
0
353 / 34 / 7
Регистрация: 02.07.2008
Сообщений: 311
21.01.2016, 19:17
Лучший ответ Сообщение было отмечено whiteapps как решение

Решение

JavaScript
1
2
3
4
5
6
7
8
    document.getElementById('bor').onmouseover=function move(e) {
 
        var elements = document.getElementById('bor').getElementsByTagName('tt');
        for (var i = 0; i < elements.length; i++) {
            var tt = elements[i];
            tt.style.background='#ff0000'; 
        }
    }
0
11 / 24 / 6
Регистрация: 05.01.2012
Сообщений: 476
22.01.2016, 10:57  [ТС]
Отлично! То, что надо! Большое спасибо

Добавлено через 13 часов 54 минуты
Ещё одна проблема образовалась. Выяснилось, что у меня на странице однотипных блоков туча, с именами bor1, bor2, bor3 и т.д. Можно тупо прописать этот скрипт тучу раз, но наверное, есть какое-то более адекватное решение?
0
353 / 34 / 7
Регистрация: 02.07.2008
Сообщений: 311
22.01.2016, 12:43
JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
    var els = document.querySelectorAll('[id^="bor"]');
    for(var k = 0; k < els.length; k++){
        els[k].onmouseover=function move(e) {
            var tt_els = e.currentTarget.getElementsByTagName('tt');
            for(var i = 0; i < tt_els.length; i++){
                if(tt_els[i] != undefined){
                    tt_els[i].style.background='#ff0000';
                }   
            }
     
        }
    }
Добавлено через 13 минут
Проверка на undefined не нужна
1
11 / 24 / 6
Регистрация: 05.01.2012
Сообщений: 476
22.01.2016, 13:47  [ТС]
Написал так:

JavaScript
1
2
 
var els = document.querySelectorAll("div#bor1, div#bor2, div#tur1, div#tur2");
Всё замечательно работает, кроме Самого Правильного Браузера, несмотря на заяву о применяемости querySelectorAll в ие9. Есть ли ещё какие варианты для ИЕ?
0
353 / 34 / 7
Регистрация: 02.07.2008
Сообщений: 311
22.01.2016, 14:12
Добавьте в заголовок страницы
HTML5
1
<meta http-equiv="X-UA-Compatible" content="IE=Edge" />
0
11 / 24 / 6
Регистрация: 05.01.2012
Сообщений: 476
22.01.2016, 14:59  [ТС]
"Объект не поддерживает свойство или метод querySelectorAll".

Я теперь браузер открыть не могу, всё виснет
0
11 / 24 / 6
Регистрация: 05.01.2012
Сообщений: 476
29.01.2016, 12:31  [ТС]
Короче, решил задачу путём тупого перебора всей структуры моего блока. Вряд ли кому сгодится,

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
var div0 = new Array(); // иды однотипных блоков, при наведении на которые должны загораться содержащиеся в них ссылки
 
    div0[1]='bor'
    div0[2]='rok'
    div0[3]='eny'
    div0[4]='aka'
    div0[5]='r'
 
document.body.onmousemove=function move(e) {
    e = e || event
    var target = e.target || e.srcElement
    var id=target.id
// перебор блоков
    for (var j = 1; j < 6; j++) { 
        elem = target
        if (id == div0[j]) { move1(id); break }
// перебор уровней вложенности содержащихся в блоках тегов
        for (var i = 1; i < 4; i++) { 
            if (target.tagName == 'TT' || target.tagName == 'H4' || target.tagName == 'S' || target.tagName == 'B' || target.tagName == 'FONT' || target.tagName == 'STRONG') { // собственно, сами теги
                elem = elem.parentNode
                id = elem.id
                if (id == div0[j]) { move1(id); break // до тех пор, пока ид тега не совпадёт и идом родительского блока, и передаём его ид в функцию 
 
} else { } } } } } 
 
 
function move1(id) { 
    var elements = document.getElementById(id).getElementsByTagName('A'); // ищем ссылку в блоке
    for (var i = 0; i < elements.length; i++) {
        var A = elements[i]
        A.className='hover' } } // и меняем её
0
Надоела реклама? Зарегистрируйтесь и она исчезнет полностью.
BasicMan
Эксперт
29316 / 5623 / 2384
Регистрация: 17.02.2009
Сообщений: 30,364
Блог
29.01.2016, 12:31
Помогаю со студенческими работами здесь

Замена фона блока
Простейший в мире скрипт: &lt;span class=&quot;bhb&quot; style=&quot;background-color: #000;&quot;&gt;GHGHGHGHGHGHG&lt;/span&gt; &lt;script&gt; ...

Замена фона сайта
Доброго времени суток! помогите пожалуйста с заменой фона... задача состоит в следующем: изменить стандартный фон в шаблоне (обычная...

Замена фона сайта
Как я понимаю чтобы заменить задний фон сайта надо заменить в *.css body { background: #b6b7bc; } Как установить...

Прокрутка и замена фона
Нужен скрипт, чтоб при прокрутке вниз строка изменяла цвет на белый &lt;!DOCTYPE html&gt; &lt;html lang=&quot;en&quot;&gt; ...

Замена фона сайта
Доброго времени суток, форумчане! Подкинули задачку сменить фон сайта, на новогоднюю тематику, но сайт был не мною написан, что написать...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
16
Ответ Создать тему
Новые блоги и статьи
Инструменты COM: Сохранение данный из VARIANT в файл и загрузка из файла в VARIANT
bedvit 28.01.2026
Сохранение базовых типов COM и массивов (одномерных или двухмерных) любой вложенности (деревья) в файл, с возможностью выбора алгоритмов сжатия и шифрования. Часть библиотеки BedvitCOM Использованы. . .
Загрузка PNG с альфа-каналом на SDL3 для Android: с помощью SDL_LoadPNG (без SDL3_image)
8Observer8 28.01.2026
Содержание блога SDL3 имеет собственные средства для загрузки и отображения PNG-файлов с альфа-каналом и базовой работы с ними. В этой инструкции используется функция SDL_LoadPNG(), которая. . .
Загрузка PNG с альфа-каналом на SDL3 для Android: с помощью SDL3_image
8Observer8 27.01.2026
Содержание блога SDL3_image - это библиотека для загрузки и работы с изображениями. Эта пошаговая инструкция покажет, как загрузить и вывести на экран смартфона картинку с альфа-каналом, то есть с. . .
влияние грибов на сукцессию
anaschu 26.01.2026
Бифуркационные изменения массы гриба происходят тогда, когда мы уменьшаем массу компоста в 10 раз, а скорость прироста биомассы уменьшаем в три раза. Скорость прироста биомассы может уменьшаться за. . .
Воспроизведение звукового файла с помощью SDL3_mixer при касании экрана Android
8Observer8 26.01.2026
Содержание блога SDL3_mixer - это библиотека я для воспроизведения аудио. В отличие от инструкции по добавлению текста код по проигрыванию звука уже содержится в шаблоне примера. Нужно только. . .
Установка Android SDK, NDK, JDK, CMake и т.д.
8Observer8 25.01.2026
Содержание блога Перейдите по ссылке: https:/ / developer. android. com/ studio и в самом низу страницы кликните по архиву "commandlinetools-win-xxxxxx_latest. zip" Извлеките архив и вы увидите. . .
Вывод текста со шрифтом TTF на Android с помощью библиотеки SDL3_ttf
8Observer8 25.01.2026
Содержание блога Если у вас не установлены Android SDK, NDK, JDK, и т. д. то сделайте это по следующей инструкции: Установка Android SDK, NDK, JDK, CMake и т. д. Сборка примера Скачайте. . .
Использование SDL3-callbacks вместо функции main() на Android, Desktop и WebAssembly
8Observer8 24.01.2026
Содержание блога Если вы откроете примеры для начинающих на официальном репозитории SDL3 в папке: examples, то вы увидите, что все примеры используют следующие четыре обязательные функции, а. . .
КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin
Copyright ©2000 - 2026, CyberForum.ru