Element style как изменить

Element style как изменить

Здравствуйте
Столкнулся с проблемой — при просмотре страницы Firebag он показывает что часть свойств элементам на странице задается через element.style , но что это за чудо такое и где лежит, к сожалению не до конца понятно, интернет тоже молчит.
Единственное чем удается перекрывать данные свойства — это выставлением нужных свойств в CSS файлах с обязательным прописыванием Important!

Понимаю, что это не рещение проблемы а лишь заплатка поэтому прошу помощи.

  • Drupal 6
  • Есть вопрос
  • Блог
  • Войдите или зарегистрируйтесь, чтобы отправлять комментарии

Комментарии

Улыбнуло!

С одной стороны все верно прописывать в стилях с импортантом, но с другой, нужно смотреть, не используется ли там аякс, который динамически меняет этот стиль (например, как в views slideshow и т.п.).

Доходчиво?

тоже порой гемор с этим. А как выявить, в каком конкретно файле (файле шаблона, модуля или еще каком) задается установка этого стиля?

  • Войдите или зарегистрируйтесь, чтобы отправлять комментарии

Опять же можно выявить по html и css, который виден в firebug

  • Войдите или зарегистрируйтесь, чтобы отправлять комментарии

Смотря какой модуль. Помню юзал модуль rotator, там как раз была такая проблема. Думал хакнуть, а отказался от него и стал использовать view_rotator, а там сделал темизацию, вырезав все лишнее. В общем копайте модуль, если не хотите перекрывать, а потом еще и еще раз перекрывать стили.

Спасибо, стал догонять потихоньку.
Задача моя была следующая — выводил ноду через Iframe Lightbox2 и пытался определить как изменить размеры окна. И именно в element.style выводились размеры окна.
Единственный вариант изменения размеров окна в ССК файле к стилям значения !Important.

И еще вопрос почему если я в CCK файле для Lightbox2 ставлю скрыть Шапку (#header) у меня она и на сайте исчезает?

Описался не ССK а СSS

Спасибо, стал догонять потихоньку.
Задача моя была следующая — выводил ноду через Iframe Lightbox2 и пытался определить как изменить размеры окна. И именно в element.style выводились размеры окна.
Единственный вариант изменения размеров окна в CSS файле, применение к стилям значения !Important.
И еще вопрос почему если я в CSS файле для Lightbox2 ставлю скрыть Шапку (#header) у меня она и на сайте исчезает?

  • Войдите или зарегистрируйтесь, чтобы отправлять комментарии

И еще вопрос почему если я в CSS файле для Lightbox2 ставлю скрыть Шапку (#header) у меня она и на сайте исчезает?

Потому-что #header, т. е. div прописан в файле page.tpl.php темы оформления.

  • Войдите или зарегистрируйтесь, чтобы отправлять комментарии

Я имел вв иду, почему CSS файлы которые должны имзменять вид только для Lightbox, т.е. только при его выводе, воздействуют и на остальные страницы сайта. Я хотел чтобы Header не выводился только для окна lightbox. Для меня правка темы в tpl файлах пока сложновата,так что пытаюсь выкручиваться через CSS.

  • Войдите или зарегистрируйтесь, чтобы отправлять комментарии

Потому что там, возможно, присваивается оному div не один класс, а несколько. Если перекрывать стили используя только первый класс из присвоенных div’у, то он может затрагивать и другие слои с одноименными классами.

А откуда в окне Lightbox div с id header? Вот сейчас как раз в очередной раз кручу этот модуль и не вижу в его html-коде ничего подобного.

Сегодня в очередной раз получил письмо от старого клиента, которому когда-то делал сайт на Joomla с просьбой "чуть-чуть подправить сайт", а именно — уменьшить отступы вокруг позиции модуля. Я думаю, эта проблема рано или поздно возникает почти у каждого владельца сайта на любом движке — хотя бы раз в год надо чуть освежать дизайн.

Читайте также:  Daolx8mb6d1 rev d схема

Если объем работы невелик, я своим клиентам делаю за символическую цену или, иногда, вообще бесплатно. Сложность в том, что у меня не всегда есть возможность сделать это быстро. Если вы хоть чуть-чуть разбираетесь в HTML и CSS, я думаю, это руководство будет вам полезно.

Возьмем простой пример — на сайте под Joomla3 нужно поменять цвет модулей в боковой колонке. В качестве примера буду использовать данный сайт.

Какой софт нам потребуется?

  1. Браузер, в котором можно смотреть исходный код страницы и, что важно — код отдельного элемента. Это позволяют делать почти все современные браузеры
  2. FTP-клиент — программа, позволяющий видеть сайт "изнутри" как папку на жестком диске. Я использую Total Commander (условно бесплатный).
  3. Notepad++ — текстовый редактор, оптимизированный для работы с кодом. В отличие от обычного "блокнота" имеет нумерацию строк, подсветку синтаксиса и возможность быстрого перехода к нужной строке. Подробнее о Notepad++

Алгоритм действий

1. Открываем страницу в браузере, находим на ней тот элемент, стиль которого нужно поменять.

2. Делаем по этому элементу правый клик мышкой, в появившемся контекстном меню выбираем пункт "посмотреть код элемента". Я использую Opera, в ней это выглядит так:

В нижней части окна браузера при этом появляется панель с исходным кодом страницы, в котором подсвечен код того элемента, по которому мы кликнули.

В правой панели — стиль элемента, в данном случае, это класс .well — мы видим, что в нем прописаны все цвета, отступы, границы, и прочие свойства. Более того, мы можем прямо здесь внести изменения в стиль — отключить элементы, задать им другие параметры и браузер покажет данный элемент с новыми настройками.

Только вот беда — как ни настраивай стиль через браузер, при следующей перезагрузке страницы все настройки восстановятся, что вполне логично — мы не можем через браузер вносить изменения в файле на сервере (к счастью :), нам нужно зайти на сервер по FTP и найти файл со стилями. Где искать?

В панели со стилями справа вверху указан путь к файлу css на сервере, а также номер строки в этом файле, где прописаны настройки стиля элемента. Чтобы поменять вид элемента на сайте нам нужно подправить файл стиля на сервере.

3. Подключаемся к сайту по FTP при поможи FTP-клиента. Для этого нам потребуется адрес хоста, логин и пароль к FTP-аккаунту — этой информацией вас должен снабдить хостинг-провайдер.

В нашем случае путь к файлу стиля такой: /templates/new-protostar/css/template.css (строка 2155)

Находим этот файл и открываем его в редакторе (я использую Notepad++) и ищем данную строку. В Notepad++ есть горячая клавиша Ctrl+G — перейти к строке. Вводим номер 2155 и нажимаем ОК. И вот, примерно что мы увидим:

Теперь можно вносить изменения в файл (только не забудьте сделать бэкап — мало ли что?). После сохранения файл будет закачан обратно на сервер и изменения станут видны на сайте.

Этот вариант хорош тем, что он практически универсален — он применим не только для сайта на Joomla, но и на любом другом движке — главное, чтобы у вас был FTP-доступ и обозначенный выше набор программ (или их аналогов).

Если нет доступа FTP

Если у вас нет доступа по FTP, это можно сделать в редакторе шаблона через админку сайта.

Читайте также:  Dc universe online гайды

В Joomla это делается через меню "расширения" / "менеджер шаблонов" /

. откроется подобие файлового менеджера, в котором можно открывать файлы движка и вносить в них изменения.

В других движках также почти всегда есть возможность это сделать.

Этот метод плох тем, что позволяет редактировать только тот стиль, который зашит в шаблон. Если же вы используете какое-то альтернативное расширение для управления контентом, например, K2, вы не сможете добраться до файла CSS.

Да и производительность труда при использовании данного метода правки будет низкой — функциональность редактора не впечатляет.

"Element-style" — как его поменять?

Бывает так, что в окне просмотре CSS-свойств элемента фигурирует фраза element-style. Это означает, что свойства элемента прописаны не во внешнем CSS-файле, а в самом коде HTML или PHP. Поменять его сложнее, чем элемент, описанный во внешнем файле CSS, но все же выполнимо. Самая большая сложность — это найти тот самый файл, который содержит этот элемент — в Joomla они, как правило, раскиданы по всей папке public_html 🙂

Обычно описание элементов, общих для всего сайта, находится внутри шаблона — public_html/templates/имя шаблона/index.php, но если вы используете сторонние компоненты, то искать исходный код страниц следует в папке этих расширений public_html/components/имя компонента/views — а там уже смотреть исходный код php-файлов и html-шаблонов и искать нужный элемент и его описание. В очередной раз напоминаю — прежде чем вносить изменения в код, сделайте резерную копию.

Но самое обидное то, что даже если вы нашли и поменяли нужное свойство, при следующем обновлении компонента, все сбросится к значениям по умолчанию.

В этом руководстве мы расскажем, как модифицировать DOM, изменяя стили, классы HTML-элементов с помощью JavaScript. Это даст лучшее понимание того, как управлять основными элементами в DOM.

Обзор выбора элементов

Библиотека jQuery упростила процесс выбора одного или нескольких элементов и применения изменений ко всем одновременно.

Напомним, что document.querySelector() и document.getElementById() — это методы, которые используются для доступа к одному элементу. Используя div с атрибутом id, мы можем получить доступ к этому элементу.

Метод querySelector() является более надежным. Он позволяет выбрать элемент на странице с помощью любого типа селектора.

Получив доступ к элементу, можно изменить его отдельную часть. Например, текст, размещенный внутри него.

Но при доступе к нескольким элементам с помощью общего селектора, такого как определенный класс, нужно пройтись по всем ним. В приведенном ниже примере используются два элемента div с одинаковым значением атрибута class:

Мы будем использовать метод querySelectorAll() для захвата всех элементов с классом demo-class. А также forEach() для их перебора и изменения.

Также к определенному элементу можно получить доступ с помощью querySelectorAll():

Свойства и методы, используемые в примерах, приведенных в этой статье, часто будут привязаны к прослушивателям событий . Благодаря им они смогут реагировать на клики, наведения курсора и другие действия пользователей.

Примечание: Методы getElementsByClassName() и getElementsByTagName() возвращают наборы элементов HTML, не имеющие доступа к методу forEach(). Он использует querySelectorAll(). В этих случаях необходимо применять стандартный цикл for для перебора набора.

Атрибуты — это значения, которые содержат дополнительную информацию об HTML-элементах. Чаще всего они состоят из пары имя / значение и могут применяться в зависимости от элемента. Полный список HTML- атрибутов смотрите в списке атрибутов .

К пользовательским элементам, которые не являются частью стандарта HTML, добавляется префикс data-.

В JavaScript доступно четыре метода изменения атрибутов элемента:

Метод Описание Пример
hasAttribute() Возвращает логическое значение true или false element.hasAttribute(‘href’);
getAttribute() Возвращает значение указанного атрибута или null element.getAttribute(‘href’);
setAttribute() Добавляет или обновляет значение указанного атрибута element.setAttribute(‘href’, ‘index.html’);
removeAttribute() Удаляет атрибут из элемента element.removeAttribute(‘href’);
Читайте также:  Hard reset samsung la fleur

Создадим новый HTML-файл с тегом , использующим один атрибут. В нем мы будем ссылаться на изображение, доступное через URL-адрес.

При загрузке созданной веб-страницы в браузере ее HTML-код будет выглядеть следующим образом:

Теперь протестируем все методы для обработки атрибутов.

Удалим атрибут src и значение, связанные с тегом . Но можно сбросить этот атрибут и назначить ему другое изображение с помощью img.setAttribute():

Также можно изменить атрибут напрямую, присвоив ему новое значение в качестве свойства элемента:

Любой атрибут может быть отредактирован так же, как и с помощью описанных выше методов.

Методы hasAttribute() и getAttribute() используются с условными операторами. Методы setAttribute() и removeAttribute() также применяются для изменения структуры DOM.

Атрибут class соответствует селектору класса CSS . CSS-классы используются для применения стилей к нескольким элементам. В отличие от идентификаторов, которые могут существовать на веб-странице только в единственном экземпляре.

В JavaScript есть свойства className и classList , предназначенные для работы с атрибутом class.

Метод / Свойство Описание Пример
className Получает или задает значение класса element.className;
classList.add() Добавляет одно или несколько значений класса element.classList.add(‘active’);
classList.toggle() Включает или отключает класс element.classList.toggle(‘active’);
classList.contains() Проверяет, существует ли класс. element.classList.contains(‘active’);
classList.replace() Заменяет существующее значение класса новым. element.classList.replace(‘old’, ‘new’);
classList.remove() Удаляет значение класса. element.classList.remove(‘active’);

Создадим еще один HTML-файл для демонстрации перечисленных выше методов.

После открытия файла classes.html в браузере вы увидите следующее:

Свойство className было введено для предотвращения конфликтов с ключевым словом class, которое используется в JavaScript. Вы можете использовать className, чтобы присвоить значение непосредственно классу.

Мы присвоили первому элементу div класс warning, определенный в CSS. Вы получите следующий результат:

Обратите внимание, что если какие-либо классы уже используются в элементе, это переопределит их. Можно добавить несколько классов, разделенных пробелом, используя свойство className.

Другой способ изменить классы – использовать свойство classList , которое включает в себя несколько полезных методов. Они похожи на JQuery-методы addClass, removeClass и toggleClass.

После выполнения указанных выше методов веб-страница будет выглядеть следующим образом:

Использование classList.add() добавит новый класс в список существующих. Также можно использовать setAttribute для изменения класса элемента.

Изменение стилей

Создадим простой пример для демонстрации изменения стилей элементов с помощью JavaScript. Ниже приведен новый HTML-файл. Он включает в себя div с несколькими встроенными стилями, применяемыми для отображения квадрата.

При открытии файла styles.html в браузере вы увидите следующее:

Один из вариантов редактирования стилей – использование метода setAttribute().

Но подобный подход удалит все существующие для элемента встроенные стили. Поэтому лучше напрямую использовать атрибут style:

Обратите внимание, что в методах JavaScript используется другие правила написания свойств CSS. Например, вместо text-align мы будем использовать textAlign.

После этого окончательный результат будет выглядеть следующим образом:

Если к элементу необходимо применить много стилей, то лучше назначить стили для класса и добавить новый класс. Но в некоторых случаях необходимо будет изменить атрибут встроенного стиля.

Заключение

В этом руководстве мы рассказали, как получить доступ, изменить и удалить атрибуты HTML-элементов в DOM с помощью JavaScript. А также как добавлять и заменять CSS-классы элемента, редактировать встроенные CSS- стили. Для получения дополнительной информации ознакомьтесь с документацией по атрибутам от Mozilla Developer Network.

Данная публикация представляет собой перевод статьи « How To Modify Attributes, Classes, and Styles in the DOM » , подготовленной дружной командой проекта Интернет-технологии.ру

Ссылка на основную публикацию
Adblock detector