Курсы javascript
У алерта ты не сможешь поменять цвет текста, в таких случаях делают абсолютно позиционированный блок оформленный как диалоговое окно.
03.03.2014, 20:57
Регистрация: 13.12.2012
Сообщений: 283
рони,
Нет,я как раз вспоминал тебя.Ты просто делал как-то,
str(bgcolor:»red»).
Синтаксис не помню.Мне совсем просто,без id.
03.03.2014, 20:59
Регистрация: 13.12.2012
Сообщений: 283
Zuenf,
Мне нужно в document.write или в консоле
Последний раз редактировалось dima***, 03.03.2014 в 21:02 .
03.03.2014, 21:36
Кандидат Javascript-наук
Регистрация: 27.01.2012
Сообщений: 134
А чем не устраивает предложенный здесь Ронин вариант ?
Document
Если document.write то так:
Document
Последний раз редактировалось Zuenf, 03.03.2014 в 21:39 .
03.03.2014, 21:48
Регистрация: 13.12.2012
Сообщений: 283
Zuenf,спасибо перенёс тему сюда:
Подскажите,как правильно прописать цвет текста
Рони,без div Делал,как-то.Не помню как.
Последний раз редактировалось dima***, 03.03.2014 в 21:51 .
03.03.2014, 22:43
Регистрация: 27.05.2010
Сообщений: 33,038
dima***,
кроме вариантов предложенных Zuenf, можно задать class — но в любом случае нужен элемент вокруг текста.
Курсы javascript
есть задача-Даны несколько div элементов на html.По первому нажатию на каждый div он перекрашивается зеленым цветом, при повторном нажатии перекрашивается обратно и так далее каждый клик происходит чередование цвета. вот набросал такой код, но не работает. Помогите, пожалуйста. Что нужно переделать и почему?
Title
var box = document.getElementsByTagName("DIV") box.onclick = function() < if(true)< box.style.backgroundColor = 'green'; >else < box.style.backgroundColor = ''; >>;
21.05.2018, 23:52
Регистрация: 01.12.2016
Сообщений: 3,650
Title div
21.05.2018, 23:55
Регистрация: 01.12.2016
Сообщений: 3,650
if(true) = всегда!
backgroundColor = » — нет такого цвета
box — Это коллекция для нее нужен цикл или циклический метод
Менять цвет при наведении при клике javascript
Смена цвета через js — мы можем поменять цвет, либо при наведении, либо при клике(onclick). разберем несколько способов менять цвет с помощью javascript.
Заменить цвет у элемента с помощью javascript
- Сменить цвет(background) при наведении мышки javascript
- Изменить цвет(background) нажав по элементу.
- Изменение цвета (background) javascript скриптом
- Изменение цвета (background) кнопки javascript
- js при клике менять background
Сменить цвет(background) при наведении мышки javascript
Для того, чтобы сделать сменяемость цвета с помощью javascript, при наведении мышки. Нам понадобится:
Нам понадобится элемент DOM div,
+ onmouseover — когда мышка будет попадать на элемент,
И когда мышка будет покидать элемент — onmouseleave и внутри функций, в зависимости от действия будем изменять цвет, или возвращать первоначальный:
example.onmouseleave = function() example.style.background= «yellow»;
>;
Результат замены цвета при наведении мышки на элемент:
Изменить цвет(background) нажав по элементу.
В этом пункте разберем замену background цвета по клику с расположением js кода внутри тега.
Для того, чтобы изменить цвет элемента нажав по нему, нам понадобится, как и в выше проведенном пункте:
Пусть это будет элемент DOM div,
Соберем это все в одн целое:
Результат замены цвета при клике на элемент:
Для того, чтобы увидеть изменение цвета элемента при нажатии на него нажмите по блоку!
Изменение цвета (background) javascript скриптом
Выше я уже рассмотрел один из вариантов изменения цвета (background) javascript внутри тега.
Теперь тоже самое(ну или похожее. ) сделаем внутри скрипта.
Нам опять нужен элемент. + id
Обратимся к элементу через id
Стили для блока выделим в отдельный тег style
Далее скрипт изменения цвета (background) javascript скриптом
Используем один из способов onclick
Нам понадобится getElementById для получения объекта.
Ну и далее простое условие с проверкой, что внутри атрибута style , если цвет красный
if(if_id .style . background == «red»)
, то меняем его на #efefef
if_id .style . background = «#efefef»;
Во всех други случаях, т.е. иначе(else) меняем на красный.
if_id .style . background = «red»;
Скрипт javascript для замены background при нажатии
Не забываем. если не сделано onload, то скрипт должен находиться под выше приведенным кодом элемента, в котором собираемся изменить background при нажатии
if_id = e . target. id;
if(if_id .style . background == «red»)
if_id .style . background = «#efefef»;
if_id .style . background = «red»;
Пример изменения background при нажатии javascript
Нам остается разместить приведенный код прямо здесь. Чтобы проверить как работает изменение background при нажатии javascript кликните по ниже идущему цветному блоку.
здесь background
Изменение цвета кнопки (background) javascript
С помощью самописного скрипта, заставим кнопки менять цвет.
Алгоритм смены цвета кнопки.
У кнопки должно быть что-то одинаковое — «class» = click_me.
И что-то разное. уникальное, это id.
Javascript
Возьмем один из способов onclick
document.addEventListener(«click», function(e)
Получим имена класса и ид:
if_id = e . target. id;
the_class = e . target.className;
Условие -если нажали по нашей кнопке с классом:
if(the_class == «click_me»)
Получаем объект из имени(которое получили раннее):
if_id = document.getElementById(if_id);
При покрашенной кнопке возвращаем нажатой кнопке её цвет по умолчанию:
if(if_id .style . background == «red»)
if_id .style . background = «#efefef»;
>
Иначе, всем кнопкам с классом возвращаем в цикле её цвет по умолчанию и только той кнопке, по которой нажали изменяем цвет::
else
var links = document.querySelectorAll(«.click_me»);
links.forEach(link => link.setAttribute(«style», «background:#efefef»);
>)
if_id .style . background = «red»;
>
Соберем весь код смены цвета с помощью javascript
if_id = e . target. id;
the_class = e . target.className;
if(if_id .style . background == «red»)
if_id .style . background = «#efefef»;
var links = document.querySelectorAll(«.click_me»);
if_id .style . background = «red»;
Результат изменения цвета при нажатии на элемент
Все статьи авторские, при копироавании активная ссылка обязательна DwWeb.ru!
© 2015 — 2024 Контакты. Реклама на сайте
Лучший хостинг : RUWEB + помощь по RUWEB
Кнопка изменения цвета элемента через JavaScript
Если ты принял компульсивное решение изучать JavaScript и теперь сидишь в шоке, то мы подготовили небольшой пример, который покажет тебе базовую концепцию DOM и работу с объектами.
Чуть-чуть теории
Document Object Model, сокращённо DOM – объектная модель документа, которая представляет все содержимое страницы в виде объектов, которые можно менять.
Объект document – основная «входная точка». С его помощью мы можем что-то создавать или менять на странице. И именно DOM позволяет нам получать доступ к элементам страницы с помощью JavaScript.
Получив с сервера документ, парсер браузера каждый тег превращает в узел и строит их иерархию. В результате получается дерево узлов (node), или просто DOM-дерево, в котором вложенные элементы представлены в виде дочерних узлов с полным набор атрибутов. Подробнее про DOM — тут.
Каждый элемент страницы является объектом Например, можем поменять цвет фона на черный
#меняем фон на черный document.body.style.background = "black"
Поиск элемента по ID
Окей, мы можем менять какие-то параметры конкретного элемента. Но что, если код растянется на сотни или тысячи строк? Как нам найти конкретный элемент над которым мы будем работать?
Собственно, «искать» не обязательно- мы можем вызвать какой-либо уникальный элемент на странице, у которого есть атрибут id (обозначается символом #) с помощью document.getElementById(id). Например:
The Document Object
The getElementById() Method
Значение id должно быть уникальным. В документе может быть только один элемент с данным id. Результат:
Поиск элемента по селектору
Выцеплять элементы по ID не очень удобно с практической точки зрения. Наиболее универсальный метод поиска – это querySelectorAll(css), он возвращает все элементы, удовлетворяющие данному CSS-селектору.
Также существует «обычная» конструкция querySelector. Единственная разница между querySelectorAll и querySelector в том, что первый возвращает массив элементов, а второй только первый элемент найденный на странице.
Этот метод действительно мощный, потому что можно использовать любой CSS-селектор. А их достаточно много. Например:
Использование JavaScript метода document.querySelectorAll() (перебор элементов в цикле) Первый блокВторой блокТретий блок
События
Когда нам нужно выполнить какой-то код при клике или при наведении на элемент — используется событие. Событие – это сигнал от браузера о том, что что-то произошло. На каждый DOM-элемент можно повесить такой эвент. Какие события могут быть:
- click – происходит, когда кликнули на элемент левой кнопкой мыши (на устройствах с сенсорными экранами оно происходит при касании).
- contextmenu – происходит, когда кликнули на элемент правой кнопкой мыши.
- mouseover / mouseout – когда мышь наводится на / покидает элемент.
- mousedown / mouseup – когда нажали / отжали кнопку мыши на элементе.
- mousemove – при движении мыши.
JavaScript позволяет при обнаружении нужного события выполнить необходимый код. Для этого у HTML элементов есть специальные атрибуты обработчики событий (браузеру нужно понимать, что делать при наступлении какого-либо события)
Такой обработчик мы можем положить прямо в атрибут элемента:
В нашем примере мы напишем скрипт, который позволит по клику (тапу) на кнопку сделать однократное изменение цвета всех квадратов с синего на красный.
Практика
Для начала накидаем структуру. На странице у нас будет кнопка с атрибутом onlclick (туда мы передаем JS-функцию, которую напишем далее) и несколько блоков div с классом square. В кнопку прописываем атрибут обработчик, функция которого которая назначена у нас на кнопку Change Color
Нажми на кнопку, чтобы изменить цвет элемента
Опишем через css параметры класса square. По теории мы помним, что нам для функции будет нужен именно селектор класса, чтобы применить стиль к нескольким элементам на странице
.square
Теперь непосредственно сам код JS. Пишем функцию, которую прописали в обработчике. В нашем случае document.getElementById(id) не подходит — у нас несколько элементов на странице, поэтому используем document.querySelectorAll. Внутри указываем наш класс. Метод forEach() выполняет указанную функцию один раз для каждого элемента в массиве.
function changeColor() < document.querySelectorAll(".square").forEach(v =>v.style.backgroundColor = "red"); >