В разделе на вопрос Как удалить стиль элемента, заданный в каком-то.css файле заданный автором хлебосольство лучший ответ это В порядке убывания:
1) создайте свой файл.css линк на него поместите в html после того файла, стили которого требуется переопределить. пропишите селектор так, как он указан в первом файле. исправьте нужное свойство.
2) поместите нужный селектор { свойство: новое значение; } перед закрывающим - надо прописывать в каждом файле, или, если head в инклюде, то в нем.
3) пропишите стили прямо в элементах (не рекомендуется) - надо прописывать в каждом теге во всех файлах.
если требуется удалить свойство, то для каждого это можно сделать по своему. смотрите на каждое свойство. например: width: auto; font-family: inherit или то, что указано для body, background: none transparent;
и т. д.
для этого img: img { height: auto; width: auto; } - в css (нужный селектор - как прописан в файле.css вместо img),
или - в HTML
Чтобы смотреть свойства, примененные к элементу, видеть стили и селекторы и проверять свои исправления прямо в браузере (можно прописать и посмотреть, как будет работать, а потом перенести в файл) - Firefox + ссылка
В опера, хроме, интернет эксплорере свой "файрбаг" уже есть. в Opera - Меню → Страница → Средства разработки → Open Opera Dragonfly (или пр. кн. мыши на странице - проинспектировать элемент)
В Chrome - пр. кн мыши на странице - просмотр кода элемента
В IE - нажать на клаве F12

В данном уроке рассматриваются вопросы манипулирования существующими элементами на странице:

• Удаление элементов со страницы с помощью методов empty() , remove() , detach() и unwrap()
• Замена элементов новыми элементами с помощью методов replaceWith() и replaceAll()
• Перемещение элементов от одного родительского элемента к другому на странице

Метод empty() - это простейший способ удаления содержимого со страницы. Вызов метода empty() для объекта jQuery удаляет все содержимое из набора, соответствующего элементу (или элементам) в объекте jQuery.

Другими словами, метод empty() удаляем все наследственные элементы и узлы (такие, как текстовые узлы) из каждого элемента, попадающего в набор, оставляя элемент пустым.

В примере удаляется содержимое из двух элементов div:

$(init); function init() { // Удаляем содержимое #myDiv1 и #myDiv2 $(".emptyMe").empty(); }

Параграф с текстом

Другой параграф с текстом

После выполнения выше приведённого кода содержимое страницы изменится на:

Если метод empty() удаляет всё внутри элемента, то метод remove() удаляет все, включая сам элемент. Например:

$(init); function init() { // Удаляем #myDiv1 и #myDiv2 целиком $(".removeMe").remove(); }

Параграф с текстом

Другой параграф с текстом

после выполнения выше приведённого кода оба элемента div будут удалены со страницы:

Вы можете передать строку с условным селектором в метод remove() . В этом случае, удаляемые элементы будут фильтроваться селектором. Например:

$(init); function init() { // Удаляем только #myDiv2 $(".removeMe").remove(":contains("Другой параграф")"); }

Параграф с текстом

Другой параграф с текстом

В выше приведённом примере будет удалён только элемент div , для которого установлен класс removeMe и содержащий текст "Другой параграф". Все остальное останется на странице:

Параграф с текстом

Метод remove() возвращает объект jQuery, который содержит удалённые элементы. Теоретически, можно удалить какие-нибудь элементы из одного места на странице, а позже снова присоединить их где угодно..

Однако, для того, чтобы сохранить ресурсы и избежать потенциальной проблемы с утечкой памяти, метод remove() удаляет все данные jQuery и события, ассоциированные с удалённым элементом. Например, если элементу было назначено событие jQuery click , а затем элемент был удалён со страницы с помощью метода remove() , то событие click будет удалено из элемента. Это может вызвать проблему, если позже захотите вернуть элемент обратно на страницу и восстановить его функциональность.

В данном случае может помочь метод detach() (появился в jQuery 1.4). Он действует почти также как и метод remove() , за исключением одного - он не удаляет данные jQuery и события, ассоциированные с удалённым элементом. Это означает, что позже вы можете присоединить удалённые элементы обратно с сохранением их метаданных jQuery.

Пример. Следующий скрипт назначает событие jQuery click каждому из двух параграфов на странице. Оба обработчика события просто переключают класс CSS "red" для параграфа, чтобы изменить цвет с красного на чёрный или обратно каждый раз, когда на него нажимают.

Затем скрипт удаляет первый параграф со страницы с использованием метода remove() и сохраняет объект jQuery , который содержал параграф в переменной myDiv1Para . Затем повторно присоединяем параграф к родительскому div с помощью метода appendTo() .

Тоже самое мы проделываем со вторым параграфом, только используем метод detach() вместо метода remove() .

< p.red { color: red; } $(init); function init() { // Назначаем событие click каждому параграфу div $("#myDiv1>p").click(function() { $(this).toggleClass("red"); }); $("#myDiv2>p").click(function() { $(this).toggleClass("red"); }); // Удаляем и восстанавливаем параграф #myDiv1 var myDiv1Para = $("#myDiv1>p").remove(); myDiv1Para.appendTo("#myDiv1"); // Удаляем и восстанавливаем параграф #myDiv2 var myDiv2Para = $("#myDiv2>p").detach(); myDiv2Para.appendTo("#myDiv2"); }

Параграф с текстом

Другой параграф с текстом

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

Это происходит потому, что вызов метода remove() привёл к удалению обработчика события для первого параграфа, а метод detach() сохранил обработчик события click для второго параграфа.

Метод unwrap() удаляет родителя элемента (или родителей набора элементов)из DOM. Элемент займёт место родительского элемента в DOM.

Следующий пример разворачивает содержание div . Другим словами происходит замещение div его содержимым:

$(init); function init() { // Удаляем элемент #myDiv, но сохраняем его содержимое $("#myPara").unwrap(); }

Параграф с текстом

Другой параграф с текстом

После выполнения выше приведённого кода, содержание страницы примет следующий вид:

Параграф с текстом

Другой параграф с текстом

Метод replaceWith() позволяет заменять элемент или набор элементов новым содержимым. Вы можете передать замещающий контент в любой из следующих форм:

• Объект элемента , который создан с помощью функции JavaScript DOM, такой как document.getElementById() или document.createElement()
• Строка HTML , представляющая замещающий контент
• Объект jQuery , содержащей элемент (или элементы), который будет использоваться для замещения
• Возвратная функция , которая должна возвращать замещающий HTML код

Ниже приводится пример, который показывает метод replaceWith() в действии. Производится замещение первого параграфа новой строкой HTML, второй параграф замещается объектом элемента, а третий параграф заменяется результатом функции, которая возвращает текущее время:

$(init); function init() { // Заменяем параграф в #myDiv1 новым параграфом $("#myDiv1>p").replaceWith("

Новый параграф с текстом

Текущее время: " + currentHours + ":" + currentMinutes + ":" + currentSeconds + "

Параграф с текстом

Параграф с текстом

Параграф с текстом

После выполнения кода содержимое страницы примет вид:

Новый параграф с текстом

Текущее время: 13:52:17

Метод replaceAll() выполняет туже самую работу, что и метод replaceWith() , но вместо передачи замещающего контента в качестве аргумента, вам нужно передать элемент, который нужно заменить.

Например, следующие 2 строки кода делают одно и тоже:

$("#myDiv").replaceWith("

Здесь новый текст

Здесь новый текст

Теперь вы знаете, как удалять и заменять элементы. Остаётся открытым вопрос: как перемещать элементы по дереву DOM? Например, есть параграф внутри элемента div , и нужно его переместить в другой div .

Несмотря на то, что в jQuery нет специального метода для перемещения элементов по дереву DOM, в действительности это очень просто реализовать. Все, что нужно сделать, это выделить элемент(ы), которые вы хотите переместить; затем вызвать метод "добавления" , например, append() , appendTo() или prepend() , чтобы добавить выделенный элемент к другому родительскому элементу. jQuery автоматически распознает, что элемент(ы) уже существует на странице и переместит его к новому родителю.

Пример воспроизводит описанный процесс. Параграф перемещается из первого div во второй:

$(init); function init() { // Перемещаем параграф из #myDiv1 в #myDiv2 $("#myDiv2").append($("#myDiv1>p")); }

Параграф с текстом

После выполнения кода страница примет следующий вид:

Параграф с текстом

А здесь другой способ перемещения элемента:

// Перемещаем параграф из #myDiv1 в #myDiv2 $("#myDiv1>p").appendTo($("#myDiv2")); // Пермещаем параграф из #myDiv1 в #myDiv2 var para = $("#myDiv1>p"); para.prependTo("#myDiv2"); // Перемещаем параграф из #myDiv1 в #myDiv2 // с помощью явного отсоединения его и добавления в новое место $("#myDiv1>p").detach().prependTo("#myDiv2");

З-й пример демонстрирует очень полезную технику jQuery — связывание методов. Так как большинство методов jQuery возвращает объекты, то можно вызывать другой метод для возвращаемого объекта. Что в свою очередь приведёт к возвращению следующего объекта jQuery и так далее.

Так в выше приведённом примере объект jQuery возвращается методом detach() , который вызывается для удаления параграфа. А метод prependTo() вызывается для возвращённого объекта jQuery, чтобы добавить удалённый параграф к новому родительскому элементу.

Что произойдёт, если попытаться переместить какой-нибудь контент в более чем один родительский элемент в одно и то же время? Если это сделать, jQuery сначала удалит контент из старого родителя, затем клонирует контент столько раз, сколько нужно и добавит клоны в каждый указанный родительский элемент. Например:

$(init); function init() { // Перемещаем параграф из #myDiv1 в #myDiv2 и #myDiv3 $("#myDiv2, #myDiv3").append($("#myDiv1>p")); }

Параграф с текстом

После выполнения выше описанного кода, содержимое страницы будет выглядеть так:

Параграф с текстом

Параграф с текстом

Удаление, замена и перемещение контента являются фундаментальными концепциями, которые позволяют строить замечательные сайты на основе jQuery.

04.07.2012 Ромчик

Доброго времени суток. Мы продолжаем изучать jQuery. Я напомню, что jQuery — это фреймворк JavaScript. И мы с Вами уже научились делать выборку элементов , делать фильтрацию выборки , производить стандартные операции над элементами без эффектов , производить стандартные операции над элементами с эффектами . А сегодня мы остановимся на изучении методов, которые работают с атрибутами элементов…

На практике достаточно часто необходимо изменять различные атрибуты у html элементов, добавлять и удалять классы, просматривать и изменять различные css-свойства элементов. Для этого в jQuery есть специальные методы, которые мы и рассмотрим.

Метод attr(key, value) служит для возвращения или изменения значения атрибута у элемента, где:

• key — название атрибута
• value — значение атрибута (если значение указано, то изменяет его, в противном случае просто возвращает)

Например, у div с id=test есть width=300px и мы хотим узнать его ширину

$(document).ready(function(){ $("#test").attr("width"); })

Метод removeAttr(key) — удаляет указанный атрибут, где:

• key- название атрибута

Например у нас есть div с id=test есть width=300px и мы хотим удалить данный атрибут:

$(document).ready(function(){ $("#test").removeAttr("width"); })

Метод addClass(name) — добавляет класс к выбранному элементу с именем name.
Например, добавим к div с id=test класс example:

$(document).ready(function(){ $("#test").addClass("example"); })

Метод removeClass(name) — удаляет класс у элемента с именем name.
Например у нас есть div с id=test и, мы хоти удалить наш класс у данного div-а:

$(document).ready(function(){ $("#test").removeClass("example"); })

Метод css(name, value) — позволяет получить css свойство элемента с имененем name (если не задано вторым параметром значение данного свойства) или изменять значение css свойства с именем name на значение value (если второй параметр value задан)
Например у нас есть заголовки h1 и мы хотим изменить размер шрифта до 20px, тогда:

$(document).ready(function(){ $("h1").css("font-size",20); })

До сих пор мы рассматривали простое изменение свойств элементов, но в jQuery есть еще один замечательный метод, который позволяет изменять свойства элемента плавно, как бы анимируя его. Это метод animate(settings, time, function), где:

• setting — свойства, которые будут изменять свое значение
• time — время за которое данные свойства будут менять значение
• function — функция, которая начнет свое выполнение после, того как произойдет изменение.

Например у нас есть div с id=test и width=1000px. Мы хотим изменить ширину данного div до 500px за 4 секунды.

$(document).ready(function(){ $("#test").animate({"width":"500px"},4000); })

На этом я заканчиваю пост посвященный методам jQuery, которые работают с атрибутами элементов, с добавлением(удалением) классов элемента и получением(редактированием) css свойств элементов.

Добрый всем день. Сегодня как я и обещал в уроке рассмотрим методы, которые используются для управления CSS стилями с помощью jQuery .

Напомню, что с помощью стилей мы можем не только определять внешний вид элемента на веб странице, но и управлять его положением, показывать и скрывать его по своему желанию, изменять размер, да и много еще чего. Образно говоря, тот кто получает доступ к управлению стилями CSS , тот управляет самой веб страницей! А jQuery такую возможность своим пользователям предоставляет!

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

Чтобы добавить какому-либо элементу стиль, необходимо воспользоваться следующим методом: .css(name,value)

Давайте, пока мы не ушли далеко от верха страницы, поменяем стиль у названия статьи. Сделаем его, к примеру, красного цвета:

$("#title".css("color", "#cc0000");

В этом примере я отобрал элемент с идентификаторм id="title" , который отвечает за отображение названия сайта и добавил стиль т.е. цвет. А кнопки отвечают за применение или возврат стиля по умолчанию.
В качестве параметров могут используются названия и значения, применимые в CSS: background, border, font-style, color и т.д.

Если необходимо задать для элемента несколько CSS -правил, то лучше использовать следующую конструкцию:

.css({properties})

$("#text").css({ "color" : "blue", "fontStyle" : "italic", "font-weight" : 900 });

Данная инструкция сделает у предыдущего параграфа цвет текста синим, а насыщенность шрифта установит равной 900.

Обратите внимание, что для сложно-составных свойств CSS вроде font-weight и background-color также используются их эквиваленты из JvaScript: fontWeight, backgroundColor и т.д.

Для демонстрации других методов работы со стилями я воспользуюсь помощью разноцветных квадратов, которые уже неоднократно сослужили мне службу в таких уроках как и .

Напомню код и стили для их создания:

HTML код:

Стили CSS:

DivRel {position:relative; width:600px; height:275px; border:dotted 1;} .big {position:absolute; width:200px; height:200px; left:200px; top:50px; background-color:red; border:solid 1px white; color:white; text-align:right; z-index:1;} .red {position:absolute; width:100px; height:100px; left:200px; top:50px; background-color:red; border:solid 1px white; color:white; text-align:right; z-index:1;} .green {position:absolute; width:100px; height:100px; left:250px; top:75px; background-color:green; border:solid 1px white; color:white; text-align:right; z-index:2;} .blue {position:absolute; width:100px; height:100px; left:300px; top:100px; background-color:blue; border:solid 1px white;color:white; text-align:right; z-index:3; cursor:pointer;}

Рассмотрим удаление и присвоение какому-либо элементу CSS -класса:
.removeClass(class)
.addClass(class)

$("#style2").click(function(){ $("#divRel1 > div:first").removeClass(); }); $("#rstyle2").click(function(){ $("#divRel1 > div:first").addClass("big"); });

Данная инструкция по нажатию на кнопку: "Удалить класс" , удалит класс у первого дочернего элемента содержащегося в идентификаторе id="divRel1" и добавит к нему класс class="big" после нажатия на кнопку: "Добавить класс" .

Следующий метод добавляет указанный класс к элементу, если его нет, или удаляет этот класс, если элемент уже имеет его:
.toggleClass(class)

Попробуйте покликать мышкой в пределах рамки обрамляющей цветные квадраты. Цвет фона будет попеременно меняться.

$("#divRel1").click(function () { $(this).toggleClass("yellow"); });

А получить (первая строка) и задать (вторая строка) ширину и высоту элемента элемента соответственно можно с помощью методов:
.width()
.width(value)
.height()
.height(value)

$("#divRel1 > div:last").toggle(function(){ $ (this).width(200).height(170); },function(){ $ (this).width(100).height (100); });

Продемонстрированный выше код отбирает последний :last элемент идентификатора id="divRel1" и с помощью переключателя toggle меняет или восстанавливает значение по умолчанию при клике на синий квадрат. Для подсказки в стилях определено свойство: cursor:pointer .

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

Но и это еще не все! jQuery позволяет, в случае необходимости удалить CSS -файл, связанный с HTML -страницей и привязать новый:
$("link").attr("href", "Alternative.css");

Попробуйте поменять, по вашему усмотрению, стили или код jQuery . Интересно, что у вас получится?

Дата: 2011-06-28

Комментарии к заметке:

Отличная статья. Все понятно. Спасибо.

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

Вам достаточно просто зарегистрироваться на нашем сервисе. > www.oplata-vklike.tk <

Предлагаем Вам работу без вложений, на системе автоматического приёма и обработки заказов.

Мы предоставляем:

Наш лицезионный софт.
- документы со всей необходимой доп. информацией.
- постоянная техническая поддержка.

Оплата от 5500 в день. Выплаты ежедневно.

Более подробная информация на нашем сайте >> obrabotka.zarplatt.ru realno-money.tk < Скопируйте и вставьте в адресную строку Вашего браузера.

Наш сервис предоставляет настоящие лайки на фото заказчиков, которые готовы платить за качество.

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

Чтобы стать нашим удалённым сотрудником и начать ставить лайки, зарабатывая при этом 45 рублей за 1 поставленный лайк,

Вам достаточно просто зарегистрироваться на нашем сервисе. > oplata-vklike.tk <

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

работы через интернет, с ежедневными выплатами до 11 000 руб.

Пройдите регистрацию на нашем сайте. > www.airline-rabota.tk <

Предлагаю. Увлекательную работу в интернете. Без опыта. Уверенный доход от 5000 руб. в сутки. Эта система доходчива абсолютно всем.
Вам не обязательно работать целыми сутками! Вполне достаточно уделять работе пару часов в день.
Прекратите думать, о том что в Всемирной паутине зарабатывать нельзя, в Инете зарабатывать можно!
Лёгкими и понятными для всех способами. Самое главное, честно!
Режим работы, устанавливаете самостоятельно.
Более подробная информация у нас на сайте. > http://oplata-vklike.tk < скопируйте и вставьте в адресную строку вашего браузера.

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

Чтобы стать нашим удалённым сотрудником и начать ставить лайки, зарабатывая при этом 45 рублей за 1 поставленный лайк,

Достаточно просто зарегистрироваться на нашем сервисе. > http://oplata-vklike.tk/ <

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

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

Займ от частного инвестора.

Наша компания помогает встретиться инвестору и заёмщику.

Прямой контакт с инвестором
Любая кредитная история
Нужен только паспорт
Работаем с частными лицами и фирмами
Любой регион
Сумма от 5,000 до 50,000,000 руб
Процент одобрения 97%

Преимущества:

Без залога и поручительства!
- Ставка - всего от 1% в месяц!
- Без скрытых платежей и комиссий!

Оформите заявку у нас на сайте. > www.ch-investor.tk http://oplata-vklike.tk/ <

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

Ведущая компания в России и странах СНГ по продаже авиабилетов «Airline»

Крупнейшая международная компания по продаже А/В билетов
срочно набирает сотрудников на постоянную основу для несложной
работы через интернет, с ежедневными выплатами от 11 000 руб.

Работая в нашей компании Вы получаете:

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

Пройдите регистрацию у нас на сайте. > http://airline-rabota.tk/ <

Без вложений, опыт и профессиональные навыки не требуются!

В jQuery имеется три категории методов: одни манипулируют с элементами, подходящими по шаблону; вторые возвращают значения элемента, а третьи изменяют сами элементы.

Сегодня рассмотрим методы, которые используются для CSS-стилей.

Итак, чтобы добавить какому-либо элементу стиль, необходимо воспользоваться следующим методом:

.css(name,value)

Пример:

$("div").css("border", "1px solid blue");

Данная инструкция обведет div синей рамкой.

В качестве параметров здесь используются названия и значения, применимые в : , font-style, color и т.д.

Если необходимо задать для элемента несколько CSS-правил, то лучше использовать следующую конструкцию:

.css({properties})

Пример:

$("div").css({ border:"1px solid blue", fontWeight:"bolder", backgroundColor:"red" });

Данная инструкция обведет div синей рамкой, сделает фон красным, а текст - жирным.

Обратите внимание, что для сложносоставных свойств CSS вроде font-weight и background-color используются иэ эквиваленты из JS: fontWeight, backgroundColor и т.д.

Перечислим другие методы для работы со стилями:

• .addClass(class)

  Пример:

  $("p:last").addClass("main");

  Данная инструкция добавит класс main к последнему элементу параграфа.

• .removeClass(class)

  Пример:

  $("p:even").removeClass("main");

  Данная инструкция удалит класс main из всех четных параграфов.

• .toggleClass(class)

  Пример:

  $("p").toggleClass("main");

  Данная инструкция удалит класс main из всех параграфов, если он присутствует. И добавит этот класс, если он отсутствует.

• .offset()

  Пример:

  var offDiv=$("div").offset();

  Данная инструкция позволяет получить для элемента. Чтобы получить значения конкретного свойства, нужно использовать следующие свойства: offset.left для отступа слева и offset.top - для отступа сверху.

• .height(value)

  Пример:

  $("div").height(); $("div").height(200);

  Данная инструкция позволяет получить (первая строка) и задать (вторая строка) высоту элемента.

• .width(value)

  Пример:

  $("div").width(); $("div").width(200);

  Данная инструкция позволяет получить (первая строка) и задать (вторая строка) ширину элемента.

  Еще пример:

  var widDiv=$("div").width(); $("div.fir").width(300);

  Первая строка запишет в переменную widDiv значение ширины первого div-а. Вторая инструкция задаст div-ам класса fir ширину в 300 пикселов.

  Это очень интересная особенность методов jQuery: они используются, как для задания параметров (когда принимаются 2 аргумента), так и для получения значений этих параметров (если передается один аргумент).

Вкладка 1

Вкладка 2

Вкладка 3

Вкладка 4

Вкладка 1

Вкладка 2

Вкладка 3

Вкладка 4

Vkl{ float:left; width:140px; height:28px; background:#E5BA83; color:white; font-size:20px; border-right:1px solid white; padding-left:10px; } #content{ width:603px; height:100px; background:#CCA675; } .selected{ background:#CCA675; }

Осталось самое интересное, а именно функция chang():

function chang(s){ $(".selected").removeClass("selected"); $(s).addClass("selected"); }

Итак, как же работает эта функция? Сначала ищется элемент, который имеет класс selected, и этот класс у него убирается. Затем (вторая строка) выделенному элементу (он находится по id, переданному в функцию в качестве параметра s) добавляется класс selected. Вот так все просто.

В следующем уроке узнаем, как с помощью jQuery вставлять целые куски html-кода на страницу и манипулировать ими.