Приветствую, друзья!
Данная статья пригодится новичкам в веб-программировании. Буду подразумевать, что вам знаком «СИшный» синтаксис, который лежит в основе JavaScript, и получение ссылки на элемент — метод getElementById и сопутствующие — проблем не вызывает. Естественно, основы HTML и CSS вам также должны быть известны.
Для доступа к стилям существует специальное свойство объекта — style. Пусть на странице определён элемент с идентификатором elem:
<div id="elem">DIV</div>
Тогда, для доступа к его «стилевым» свойствам, можно использовать такой код (не пытайтесь использовать, вырвано из контекста!):
document.getElementById('elem').style.ЦС
где ЦС — то свойство, к которому нужно обратиться или изменить.
Далее начинается пусть небольшая, но магия. Вам известны различные CSS свойства: background, border, display, font-size и т. п. Обратите внимание на последнее, в котором есть символ — (минус на клавиатуре). В названиях переменных такие дефисы использовать нельзя, поскольку в контексте программы они интерпретируются как знак вычитания. Для логического обоснования, маленький пример:
font-size
Если бы интерпретатор JavaScript допускал в именах символ минус, ему пришлось бы выполнить дополнительные действия:
- Проверить существование переменной font-size.
- Если её нет, попытаться выполнить арифметическое действие «вычитание» значения size из font.
Поэтому, имена свойств требуется «причесать» (нормализовать) для использования в коде. К счастью, определено всего 2 простых правила:
- Если знака минус нет (margin, border, width и прочее) — записывается как есть:
// установить элементу ширину в 30 пикселей document.getElementById('elem').style.width = '30px';
- Если знак минус присутствует, то он убирается, а следующая буква переводится в верхний регистр: background-color → backgroundСolor, z-index → zIndex и т. д.:
// Сделать фон красным document.getElementById('elem').style.backgroundColor = '#FF0000';
Вот так! Всё очень просто. Если вы знаете CSS свойства, значит, имеете возможность свободно ими рулить и в JavaScript. А попрактиковаться можете уже сейчас.
Ниже дан небольшой пример изменения свойств элемента с помощью JS. Если видете в названии слово color, это подразумевает задание цвета.
Думаю, нет нужды объяснять, что присвоение неверных значений игронируется?
Выберите CSS-свойство и укажите корректное значение для него:
днём интернета
шоколадкой для работы мозга
коробочкой ароматного чая для бодрости
продлением хостинга на +1 месяц
Привет, х64! Статья как раз наверное в тему. Сегодня весь день мучались с установкой тизеров на новом сайте. Не отображаются они в нужном месте, а только в подвале, хоть куда влепи. Интересно, что это за конфликт получился? Получается, скрипты как-то влияют на стили о_О
Надежда, доброй ночи. Скрипты лишь выдают результат своей работы, а это может быть или html/css, или картинка, или ещё чего.
Есть отличное дополнение для firefox, называется firebug; удобно смотреть, какие стили элемента (пере)определены
Да, читала и даже пыталась пользоваться. Подожду пока поддержка этих тизеров сама решит проблему ) Солидарна с Бендером: саморазрешающиеся проблемы как раз по мне ))
А вцелом спасибо за совет. Пора мне тоже углубляться, стыдно не разбираться в элементарном.
Грядет 21 апреля, блог еще не «мобильный»… Наверное придется ставить плагин (((
От тут согласен: если поддержка предоставляется, пусть сами и решают. Не должны же пользователи ихние баги фиксить
А что понимается под «элементарным»? Вряд ли JavaScript может так называться.
По 21, насколько знаю, пессимизироваться будет выдача для мобильных устройств, если под них сайт не адаптирован. «Взрослая» выдача не изменится.
Под элементарным понимается корректировка стилей шаблона. В скриптах я конечно не разберусь. Раньше мне стилевые файлы казались темным лесом. Но когда «прижимает», начинаешь понимать, что к чему )
А мой блог как раз не адаптирован ((
Когда я первый раз html увидел, тоже казалось очень сложно. А CSS — вообще набор бубликов с козябликами
Но база там действительно очень простая, нужно лишь найти слова, всё объясняющие.
Надежда, а какое количество мобильных пользователей на твоём сайте? Может, не всё так печально? Я ж помню времена, когда веб-сайты смотрелись на телефонах с разрешением 128×128 точек, и ни о какой адаптивности не слышали, но и не жаловались.
Мобильный трафик около 10%. Но люди просматривают и как ты говоришь, «не жалуются». Это Гуглу все не нравится, вот вчера пришло еще одно «письмо счастья». Озадачена всерьез.
Думается, должны изменения в алгоритмы внести. Если пользователям комфортно, отказов мало, значит, всё ок.
Хотя это Гугль, ему вообще пофиг на мысли веб-мастеров
Вот этого я и боюсь…
Надежда, рано бояться. Сперва надо посмотреть, что на самом деле будет)
Как вставить в CSS свойства переменную?
…
var width = 20;
var elem = document.getElementById(‘block’);
while(width <= 200)
{
element.style.width = 'width';
width++;
}
…
так как показано выше не работает(((
Я хочу добиться того, чтобы ширина блока увеличивалась постепенно.
Арсен, здравствуйте.
Используйте width без одинарных кавычек и добавьте размерность — px в данном случае, судя по всему.
Но этот код выполнится мгновенно. JS — динамический язык, выполняется в реальном времени, поэтому попытка «затормозить» событие, написав свою версию функции delay, к хорошему не приводят: страница подвиснет, отрисовка выполнится сразу после «фриза».
Маленький пример как это сделать.
Здравствуйте.
А как сделать вот есть например куб, у него 6 сторон, написан сверстан на css, при нажатии на ссылку скажем #side3, хочу чтобы он повернулся и стал transform=rotatate3d(0,1,0,90deg). Ну то есть чтобы повернулся своей третьей стороной. Координаты первой стороны 1,0,0,0,0deg. И так вот на все стороны сделать свои поворотики по rotate 3d. А ну да, еще нужно чтобы после поворота ширина активной стороны увеличивалась по ширине окна т.е. width = 90%
Владимир, здравствуйте.
Хороший вопрос. Возможно, чуть позже посмотрю, что можно сделать.
Еще раз здравствуйте. В общем куб уже поворачивается, там вообще просто все было. А вот как сделать чтобы активная сторона грамотно разворачивалась и сворачивалась обратно я еще никак не решил. Код тут
Владимир, доброго дня.
Возможно, не совсем верно понял про «активную» сторону. Нужно чтобы при клике на активную ссылку (по стороне) тоже что-то происходило?
Как вариант, добавить переменную side. При клике на ссылке проверять, не текущая сторона сейчас, и если да, до поворачивать на величину, отличающуюся на 360 градусов.
Небольшой костыль, но для расширения функционала стокового CSS хватает)
HTML-файл:
JS-файл:
Здравствуйте!
Спасибо за небольшое количество JavaScript-магии
А как с байДом сделать так, чтобы на оба ид применилось исчезновение?
К примеру есть два спана с одинаковым ид, но исчезает только один. Оно и понятно, ид как идентификатор для одного. И тогда есть getElementByclass, но при замене id=»saved» на class=saved, и var saved = document.getElementById(‘saved’); на var saved = document.getElementByClassName(‘saved’); ничего не происходит (не работает). А мне вот интересно, чтобы эффект применялся к обоим.
WAR1
WAR2
Здравствуйте.
Не корректно двум элементам назначать одинаковый id. На то он и идентификатор, чтобы быть уникальным. Для подобных случаев крайне желательно использовать классы. Но если очень хочется, надо использовать выборку по селекторам: querySelectorAll(). Метод вернёт массив элементов, после чего останется пробежать по каждому и изменить.
Пример. Не особо хороший с точки зрения исполнения, но вполне наглядный.