Javascript убрать - Как удалить стиль, добавленный функцией.css()? Манипулирование свойствами и атрибутами элементов.

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

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

Удаление элементов со страницы Удаление всего, что находится внутри элемента: empty()

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

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

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

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

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

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

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

Удаление элемента целиком: remove()

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

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

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

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

Текстовый узел, как он есть

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

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

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

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

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

Текстовый узел, как он есть

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

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

Удаление элемента без разрушения его данных: detach()

Метод 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()

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

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

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

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

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

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

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

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

Замена элементов Замена элемента новым содержимым: replaceWith()

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

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

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

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

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

"); // Заменяем параграф в #myDiv2 горизонтальной линией var hr = document.createElement("hr"); $("#myDiv2>p").replaceWith(hr); // Заменяем параграф в #myDiv3 строкой с текущим временем $("#myDiv3>p").replaceWith(currentTime); function currentTime() { var currentTime = new Date(); var currentHours = currentTime.getHours (); var currentMinutes = currentTime.getMinutes (); var currentSeconds = currentTime.getSeconds (); // Pad the minutes and seconds with leading zeros, if required currentMinutes = (currentMinutes < 10 ? "0" : "") + currentMinutes; currentSeconds = (currentSeconds < 10 ? "0" : "") + currentSeconds; return ("

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

"); } }

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

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

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

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

replaceAll() : альтернатива методу replaceWith()

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

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

$("#myDiv").replaceWith("

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

"); $("

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

").replaceAll("#myDiv");

Перемещение элементов

Теперь вы знаете, как удалять и заменять элементы. Остаётся открытым вопрос: как перемещать элементы по дереву 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()

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

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

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

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

Метод removeAttr()

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

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

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

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

Метод addClass()

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

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

М етод removeClass()

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

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

Метод css()

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

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

Метод animate()

До сих пор мы рассматривали простое изменение свойств элементов, но в 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 свойств элементов.

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

Манипулирование свойствами и атрибутами элементов 1. Добавление и удаление класса 1.1. Метод.addClass()

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

AddClass(имя класса) имя класса — одно или больше имен класса, отделённых друг от друга пробелами. .addClass(функция) функция — возвращает одно или более имен класса, разделенных пробелом, которые будут добавлены к существующим. В качестве аргумента принимает индекс элемента в наборе и существующее имя класса(ов).

1.2. Метод.removeClass()

Удаляет указанное имя класса(ов) у всех элементов обернутого набора.

RemoveClass(имя класса) имя класса — необязательный параметр, одно или более имен класса, разделенных пробелом. Если имя класса не указано, метод удаляет все существующие классы у элементов набора. Если имя класса задано — удаляет только указанный класс. .removeClass(функция) функция — возвращает одно или более имен класса, разделенных пробелом, которые будут удалены из существующих. В качестве аргумента принимает индекс элемента в наборе и старое имя класса(ов).

1.3. Метод.toggleClass()

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

ToggleClass(имя класса) имя класса — одно или более имен класса, разделенных пробелами, которые будут переключаться для каждого элемента набора. .toggleClass(имя класса, логическое значение) имя класса — одно или более имен класса, разделенных пробелами, которые будут переключаться для каждого элемента набора. логическое значение — устанавлвает, добавить или удалить указанный класс. Значение true добавляет класс, false — удаляет. .toggleClass(логическое значение) логическое значение — необязательный параметр, устанавливает, будут ли переключаться классы каждого элемента набора. .toggleClass(функция, логическое значение) функция — возвращает имя класса, которое будет переключаться для каждого элемента набора. В качестве аргументов получает индекс элемента в наборе и старое значение класса. логическое значение — необязательный параметр, устанавливает, будут ли переключаться классы каждого элемента набора.

1.4. Метод.hasClass()

Проверяет наличие указанного имени класса хотя бы у одного элемента в соответствующем наборе. Возвращает true , если хотя бы один из элементов в наборе имеет проверяемое имя класса, в противном случае — false .

HasClass(имя класса) имя класса — строка с именем класса для поиска.

2. Изменение атрибутов элементов

Метод получает значение атрибута первого элемента набора или устанавливает одно или более значений атрибутов для элементов набора.

2.1. Метод.attr() .attr(имя атрибута) имя атрибута — возвращает значение атрибута первого элемента в обернутом наборе. Если атрибут отсутствует, возвращает undefined . .attr(имя атрибута, значение) имя атрибута значение — строка или число, которое будет добавлено как значение атрибута для всех элементов обернутого набора. .attr(атрибуты) атрибуты — значения, которые копируются из свойств объекта, будут установлены для всех элементов обернутого набора. .attr(имя атрибута, функция) имя атрибута — задает имя атрибута, для которого будет установлено указанное значение. функция — в качестве аргументов принимает индекс элемента в наборе и старое значение атрибута. Возвращаемое значение будет установлено в качестве значения атрибута. 2.2. Метод.removeAttr()

Удаляет указанный атрибут у каждого элемента обернутого набора.

RemoveAttr(имя атрибута) имя атрибута — строка, определяющая атрибут для удаления.

3. Изменение свойств элемента 3.1. Метод.css()

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

Css(имя свойства) имя свойства — строка с именем свойства, возвращает его вычисляемое значение для первого элемента набора. .css(имена свойств) имена свойств — массив свойств, возвращает их вычисляемые значения для первого элемента набора. .css(имя свойства, значение) имя свойства значение — строка или число, которые будут установлены в качестве значения указанного свойства для всех элементов обернутого набора. .css(имя свойства, функция) имя свойства — строка с именем свойства. функция — в качестве аргументов функции передается индекс элемента в наборе и старое значение свойства. Возвращаемое значение будет установлено для всех элементов набора. .css(объект свойств) объект свойств — добавляет CSS-свойства, имена которых определены как ключи в переданном объекте, в связанные с ними значения для всех элементов в соответствующем наборе.

4. Получение и изменение размеров и координат элемента 4.1. Метод.width()

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

Width() Метод вызывается без параметров. Возвращает текущее значение ширины для первого элемента в наборе без указания единицы измерения. .width(значение) значение — целое числовое значение или строка-значение ширины, которое будет установлено для каждого элемента набора. .width(функция) функция — принимает в качестве аргумента индекс элемента и старое значение свойства, возвращаемое значение будет установлено как ширина для всех элементов.

4.2. Метод.height()

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

Height() Метод вызывается без параметров. Возвращает текущее значение высоты для первого элемента в наборе. .height(значение) значение — целое числовое значение или строка-значение высоты, которое будет установлено для каждого элемента набора. .height(функция) функция — принимает в качестве аргумента индекс элемента и старое значение свойства, возвращаемое значение будет установлено как высота для всех элементов.

4.3. Метод.innerWidth()

Возвращает ширину первого элемента в обернутом наборе с учетом отступов padding или устанавливает ее для каждого элемента обернутого набора.

InnerWidth() Метод вызывается без параметров. Возвращает текущее значение внутренней ширины для первого элемента в наборе. .innerWidth(значение) значение — целое числовое значение, которое будет установлено для каждого элемента набора. .innerWidth(функция) функция

4.4. Метод.innerHeight()

Возвращает высоту первого элемента в обернутом наборе с учетом отступов padding .

InnerHeight() Метод вызывается без параметров. Возвращает текущее значение внутренней высоты для первого элемента в наборе. .innerHeight(значение) значение — целое числовое значение, которое будет установлено для каждого элемента набора. .innerHeight(функция) функция — принимает в качестве аргумента индекс элемента и старое значение свойства, возвращаемое значение будет установлено как внутренняя ширина для всех элементов набора.

4.5. Метод.outerWidth()

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

OuterWidth(логическое значение) логическое значение

4.6. Метод.outerHeight()

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

OuterHeight(логическое значение) логическое значение — необязательное значение, если установлено true , значение margin учитывается, в противном случае нет.

4.7. Метод.offset()

Получает текущие координаты первого элемента или устанавливает координаты для каждого элемента. Возвращает объект JavaScript со свойствами left и top , содержащими координаты первого элемента в px обернутого набора относительно начала документа. Метод применяется только к видимым элементам.

Offset() Метод вызывается без параметров.

4.8. Метод.position()

Возвращает объект JavaScript со свойствами left и top , содержащими координаты первого элемента в px обернутого набора относительно ближайшего родительского элемента. Метод применяется только к видимым элементам.

Position() Метод вызывается без параметров.

класс получение (15)

Попробуй это

$(".ClassName").css("color",""); Or $("#Idname").css("color","");

Я меняю CSS с помощью jQuery, и я хочу удалить стиль, который я добавляю, на основе входного значения:

If(color != "000000") $("body").css("background-color", color); else // remove style ?

Как я могу это сделать? Обратите внимание, что строка, указанная выше, выполняется всякий раз, когда цвет выбирается с помощью набора цветов (т. Е. Когда мышь перемещается по цветному колесу).

2-я нота: я не могу сделать это с помощью css("background-color", "none") потому что он удалит стиль по умолчанию из файлов css. Я просто хочу удалить встроенный стиль background-color добавленный jQuery.

Почему бы не создать стиль, который вы хотите удалить из класса CSS? Теперь вы можете использовать: .removeClass() . Это также открывает возможность использования: .toggleClass()

(удалите класс, если он присутствует, и добавьте его, если это не так).

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

Как насчет чего-то вроде:

Var myCss = $(element).attr("css"); myCss = myCss.replace("background-color: "+$(element).css("background-color")+";", ""); if(myCss == "") { $(element).removeAttr("css"); } else { $(element).attr("css", myCss); }

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

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

MyColor {}

2) используйте этот код на основе http://jsfiddle.net/kdp5V/167/ из этого ответа gilly3:

Function changeCSSRule(styleSelector,property,value) { for (var ssIdx = 0; ssIdx < document.styleSheets.length; ssIdx++) { var ss = document.styleSheets; var rules = ss.cssRules || ss.rules; if(rules){ for (var ruleIdx = 0; ruleIdx < rules.length; ruleIdx++) { var rule = rules; if (rule.selectorText == styleSelector) { if(typeof value == "undefined" || !value){ rule.style.removeProperty(property); } else { rule.style.setProperty(property,value); } return; // stops at FIRST occurrence of this styleSelector } } } } }

Предостережения:

Не подвергается экстенсивному тестированию.
Не может включать важные или другие директивы в новое значение. Любые такие существующие директивы будут потеряны в результате этой манипуляции.
Только изменения впервые обнаружили появление стиляSelector. Не добавляет и не удаляет целые стили, но это может быть сделано с чем-то более сложным.
Любые недопустимые / непригодные значения будут игнорироваться или вызывать ошибку.
В Chrome (по крайней мере) нелокальные (как в межсайтовых) правила CSS не отображаются через объект document.styleSheets, поэтому это не будет работать на них. Нужно добавить локальные переопределения и манипулировать ими, имея в виду «первое обнаруженное» поведение этого кода.
document.styleSheets не особенно дружелюбен к манипуляциям в целом, не ожидайте, что это будет работать для агрессивного использования.

Изолировать стиль таким образом - это то, что такое CSS, даже если манипулировать им нет. Манипулирование CSS-правилами НЕ является тем, чем является jQuery, jQuery управляет элементами DOM и использует селектор CSS для этого.

Let el = document.querySelector(element) let styles = el.getAttribute("style") el.setAttribute("style", styles.replace("width: 100%", ""))

Принятый ответ работает, но в моих тестах остается пустой атрибут style в DOM. Ничего страшного, но это удаляет все:

RemoveAttr("style");

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

$(element).style.attr = " ";

Используйте мой плагин:

$.fn.removeCss=function(all){ if(all===true){ $(this).removeAttr("class"); } return $(this).removeAttr("style") }

Для вашего случая используйте его следующим образом:

$().removeCss();

$().removeCss(false);

если вы хотите удалить также CSS, определенный в его классах:

$().removeCss(true);

Просто используя:

$(".tag-class").removeAttr("style");

$("#tag-id").removeAttr("style");

Изменение свойства на пустую строку, похоже, выполняет задание.

$.css("background-color", "");

любая из этих функций jQuery должна работать:

$("#element").removeAttr("style"); $("#element").removeAttr("background-color")

ОК, 6-летний вентилятор закрытия. Вы хотите услышать простейший пример закрытия?

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

Вот как я могу преобразовать историю своего самолета в код.

В 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 аргумента), так и для получения значений этих параметров (если передается один аргумент).

Давайте, используя полученные знания сделаем меню с вкладками, вот такого вида (пощелкайте по вкладкам): jQuery - CSS

Вкладка 1

Вкладка 2

Вкладка 3

Вкладка 4

Итак, html-код страницы следующий: jQuery - CSS

Вкладка 1

Вкладка 2

Вкладка 3

Вкладка 4

Как видно, все вкладки имеют единый стиль, определяемый классом vkl, а выделенная вкладка имеет класс selected. Внешний вид пропишем на странице style.css

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-кода на страницу и манипулировать ими.