Удалить свойство css jquery: Как удалить свойство css класса на jquery? — Хабр Q&A

CSS методы jQuery

---

Эти методы дают доступ к CSS-свойствам элементов на чтение и запись.

Атрибуты  | Манипуляция DOM > Class атрибут  | CSS  

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

Манипуляция DOM > Свойства стилей  | CSS  

Возвращает или изменяет значения css-величин у выбранных элементов страницы.

Атрибуты  | Манипуляция DOM > Class атрибут  | CSS  

Проверяет наличие класса у элементов страницы.

CSS  | Размеры элементов  | Манипуляция DOM > Свойства стилей  

Функция возвращает высоту элемента. Кроме этого, с помощью height(), можно установить новое значение высоты.

CSS  | Размеры элементов  | Манипуляция DOM > Свойства стилей  

Функция возвращает высоту элемента. Кроме этого, с помощью height(), можно установить новое значение высоты.

CSS  | Размеры элементов  | Манипуляция DOM > Свойства стилей  

Функция возвращает ширину элемента. Кроме этого, с помощью width(), можно установить новое значение ширины.

CSS  | Смещение  | Манипуляция DOM > Свойства стилей  

С помощью этой функции, можно узнавать координаты элемента на странице. Кроме этого, с помощью offset(), можно изменить координаты элемента.

CSS  | Размеры элементов  | Манипуляция DOM > Свойства стилей  

Метод outerHeight() возвращает высоту элемента (включая заполнение и границу).

CSS  | Размеры элементов  | Манипуляция DOM > Свойства стилей  

Ширина элемента с учетом внутренних отступов, border-width и (опционально) внешних отступов (margin).

CSS  | Смещение  | Манипуляция DOM > Свойства стилей  

Получает значение позиции элемента top и left относительно отступов его родителя.

Атрибуты  | Манипуляция DOM > Class атрибут  | CSS  

Удаляет заданные классы у элементов на странице.

CSS  | Смещение  | Манипуляция DOM > Свойства стилей  

С помощью этой функции можно получить или изменить величину горизонтального скроллинга элементов на странице.

CSS  | Смещение  | Манипуляция DOM > Свойства стилей  

С помощью этой функции можно получить или изменить величину вертикального скроллинга элементов на странице.

Атрибуты  | Манипуляция DOM > Class атрибут  | CSS  

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

CSS  | Размеры элементов  | Манипуляция DOM > Свойства стилей  

Функция возвращает ширину элемента. Кроме этого, с помощью width(), можно установить новое значение ширины.

CSS  

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

CSS  | Манипуляция DOM > Свойства стилей  

An object containing all CSS properties that may be used without a unit. The .css() method uses this object to see if it may append px to unitless values.

CSS  

Escapes any character that has a special meaning in a CSS selector.

Свойства · jQuery для начинающих

Powered by GitBook

Кроме атрибутов также есть свойства элементов, к ним относятся «selectedIndex», «tagName», «nodeName», «nodeType», «ownerDocument», «defaultChecked» и «defaultSelected». Ну, вроде бы, список невелик, можно и запомнить. Для работы со свойствами используем методы из семейства «.prop()»:

prop(propName) — получение значения свойства

prop(propName, propValue) — установка значения свойства (также можно использовать hash либо функцию обратного вызова)

removeProp(propName) — удаление свойства (скорей всего, никогда не понадобится)

А теперь выключите музыку, и запомните следующее – для отключения элементов формы и для проверки/изменения состояния чекбоксов мы всегда используем метод «. prop()», пусть вас не смущает наличие одноименных атрибутов в HTML (это я про «disabled» и «checked»), используем «.prop()» и точка.

Давайте на примере properties.html:

Посмотрите, как работает система без нашего вмешательства — кликните чекбокс, селектбокс, попробуйте отправить форму.

Теперь приступим к серии экспериментов (не забудьте обновить страничку):

1. Ставим галочку на чекбоксе посредством метода «.attr()» — $(«#checkbox»).attr(«checked», «checked»)
2. Теперь снимите галочку мышкой — значение «.attr()» осталось без изменений, значение «.prop()» изменилось
3. Попробуйте ещё раз поставить галочку, используя метод «.attr()»

Небольшое пояснение сути происходящего. При первом вызове метода «.attr(«checked», «checked»)» проставляется галочка, т.к. изменяются и атрибут и свойство «checked». При повторном вызове уже ничего не происходит, меняется только значение атрибута, которое и так уже «checked».

Следующий эксперимент:

1. Поставьте мышкой галочку на чекбоксе
2. Снимите галочку — значение «. attr()» не изменяется
3. Попробуйте установить значение посредством вызова $(«#checkbox»).attr(«checked», «checked»)

В данном эксперименте интересен следующий момент: вызов метода «.attr(«checked», «checked»)» не срабатывает после того, как пользователь изменял статус чекбокса

Ну и ещё один эксперимент со вторым чекбоксом:

1. Удаляем галочку — $(«#checkbox-two»).removeAttr(«checked»)
2. Ставим галочку — $(«#checkbox-two»).attr(«checked», «checked»)
3. Опять удаляем галочку, используя метод «.attr()»
4. Повторяем до упаду

Работает — не трожь, мышкой всё сломаете 🙂

Сравните с поведением метода «.prop()»:

1. Удаляем галочку — $(«#checkbox-two»).prop(«checked», false)
2. Ставим галочку — $(«#checkbox-two»).prop(«checked», true)
3. Можем кликать мышкой по чекбоксу и повторять предыдущие пункты в произвольном порядке, всё будет работать как часы

Надеюсь, я достаточно наглядно дал понять, когда надо использовать «. attr()», а когда «.prop()»

Это ещё не всё, у нас же есть ещё свойство «disabled»! Но не волнуйтесь, его поведение более предсказуемо, т.к. пользователь не может вмешиваться в его состояние:

1. Включаем радио-кнопку — $(«#radio-two»).attr(«disabled», false)
2. Выключаем — $(«#radio-two»).attr(«disabled», true)
3. Повторяем

Аналогичное поведение при использовании метода «.prop()»:

1. Включаем — $(«#radio-two»).prop(«disabled», false)
2. Выключаем — $(«#radio-two»).prop(«disabled», true)
3. Повторяем

Ну, как бы, можно использовать «.attr()», но нет!

Динамическое удаление/замена внешнего файла JavaScript или CSS

Динамически снятие/замена внешнего Файл JavaScript или CSS

Любой внешний файл JavaScript или CSS, добавленный вручную или динамически, могут быть удалены со страницы. Конечный результат может быть не полностью что вы имели в виду, однако. Я расскажу об этом чуть позже.

Динамическое удаление внешнего файла JavaScript или CSS

Чтобы удалить внешний файл JavaScript или CSS со страницы, необходимо сначала выследите их, пройдя через DOM, а затем вызовите DOM’s removeChild() , чтобы выполнить работу. Общий подход заключается в определить внешний файл для удаления на основе его имени файла, хотя есть конечно, другие подходы, например, по имени класса CSS. Имея это в виду, ниже функция удаляет любой внешний файл JavaScript или CSS на основе файла введенное имя:

 function removejscssfile(имя файла, тип файла){
var targetelement=(filetype=="js")? "скрипт": (filetype=="css")? "link" : "none" //определяем тип элемента для создания нодлиста
var targetattr=(filetype=="js")? "источник" : (filetype=="css")? "href" : "none" //определение соответствующего атрибута для проверки
var allsuspects=document.getElementsByTagName(целевой элемент)
for (var i=allsuspects. length; i>=0; i--){ //поиск назад в списке узлов для поиска подходящих элементов для удаления
if (allsuspects[i] && allsuspects[i].getAttribute(targetattr)!=null && allsuspects[i].getAttribute(targetattr).indexOf(filename)!=-1)
allsuspects[i].parentNode.removeChild(allsuspects[i]) //удаляем элемент, вызывая parentNode.removeChild()
}
}
removejscssfile("somescript.js", "js") //удаляем все вхождения "somescript.js" на странице
removejscssfile("somestyle.css", "css") //удаляем все вхождения "somestyle.css" на странице 

Функция начинается с создания коллекции из всех Элементы « SCRIPT » или « LINK » на странице в зависимости на желаемом типе файла для удаления. Соответствующий атрибут для просмотра также соответственно изменяется (« src » или атрибут « href «). Затем функция начинает перебирать собранные элементы. назад, чтобы увидеть, соответствует ли какое-либо из них имени файла, который должен быть удаленный. Есть причина для обратного направления — если/когда идентифицированный элемент удаляется, коллекция сворачивается по одному элементу каждый время и продолжать правильно циклически просматривать новую коллекцию, изменение направления делает свое дело (он может столкнуться с неопределенным элементов, следовательно, первая проверка на allsuspects[i] в если заявление). Теперь, чтобы удалить идентифицированный элемент, метод DOM На нем вызывается parentNode.removeChild() .

Итак, что на самом деле происходит, когда вы удаляете внешний JavaScript или CSS файл? Возможно, не совсем то, что вы ожидаете на самом деле. В случае JavaScript, пока элемент удаляется из дерева документа, любой код загружается как часть внешнего файла JavaScript, остается в браузере Память. То есть вы по-прежнему можете получить доступ к переменным, функциям и т. д., которые были добавлены при первой загрузке внешнего файла (по крайней мере, в IE7 и Фаерфокс 2.х). Если вы хотите освободить память браузера, удалив внешний JavaScript, не полагайтесь на эту операцию для выполнения всей вашей работы. С внешними файлами CSS, когда вы удаляете файл, документ переформатируется, чтобы учесть удаленные правила CSS, но, к сожалению, , а не в IE7 (в Firefox 2.x и Opera 9).

Демо: Загрузить «myscript. js» Удалить «myscript.js» Загрузить «mystyle.css» Удалить «mystyle.css»

Источник «myscript.js»: var petname=»Spotty» alert(«Имя питомца: » + petname)

«mystyle.css» источник: #demotable td{ цвет фона: светло-желтый; } #demotable b{ цвет: синий; }

Динамическая замена внешнего файла JavaScript или CSS

Замена внешнего файла JavaScript или CSS мало чем отличается от удаление одного, насколько процесс идет. Вместо звонка parentNode.removeChild() , вы будете использовать parentNode.replaceChild() вместо этого делать ставки:

 function createjscssfile(filename, filetype){
if (filetype=="js"){ //если имя файла является внешним файлом JavaScript
var fileref=document.createElement('сценарий')
fileref.setAttribute("тип","текст/javascript")
fileref. setAttribute("источник", имя файла)
}
else if (filetype=="css"){ //если имя файла является внешним файлом CSS
var fileref=document.createElement("ссылка")
fileref.setAttribute("отн.", "таблица стилей")
fileref.setAttribute("тип", "текст/css")
fileref.setAttribute("href", имя файла)
}
вернуть ссылку на файл
}
функция replacejscssfile (старое имя файла, новое имя файла, тип файла) {
var targetelement=(filetype=="js")? "скрипт": (filetype=="css")? "link" : "none" //определить тип элемента для создания нодлиста с помощью
var targetattr=(filetype=="js")? "источник" : (filetype=="css")? "href" : "none" //определение соответствующего атрибута для проверки
var allsuspects=document.getElementsByTagName(целевой элемент)
for (var i=allsuspects.length; i>=0; i--){ //поиск назад в списке узлов для поиска подходящих элементов для удаления
if (allsuspects[i] && allsuspects[i].getAttribute(targetattr)!=null && allsuspects[i].getAttribute(targetattr).indexOf(oldfilename)!=-1){
var newelement = createjscssfile (имя нового файла, тип файла)
allsuspects[i]. parentNode.replaceChild (новый элемент, allsuspects[i])
}
}
}
replacejscssfile("oldscript.js", "newscript.js", "js") //Заменить все вхождения "oldscript.js" на "newscript.js"
replacejscssfile("oldstyle.css", "newstyle", "css") //Заменяем все вхождения "oldstyle.css" на "newstyle.css" 

Обратите внимание на вспомогательную функцию createjscssfile() , которая по сути просто дубликат loadjscssfile() , как показано на предыдущем страница, но изменена, чтобы возвращать только что созданный элемент, а не на самом деле добавление его на страницу. Это удобно, когда parentNode.replaceChild() вызывается в replacejscssfile() заменить старый элемент на новый. Есть хорошие новости: когда вы заменить один внешний файл CSS на другой, все браузеры, включая IE7, автоматически переформатирует документ, чтобы учесть новый файл Правила CSS.

Демо: Загрузить «oldscript. js» Замените на «newscript.js» вместо Загрузить «oldstyle.css» Замените на «newstyle.css» вместо

Источник «oldscript.js»: var petname=»Spotty» alert(«Имя питомца: » + petname) Источник «newscript.js»: var petname=»Красота» alert(«Имя питомца: » + petname)

«oldstyle.css» источник: #demotable2 td{ background-color: светло-желтый; } #demotable2 b{ цвет: синий; } Источник «newstyle.css»: #demotable2 td{ цвет фона: голубой; } #demotable2 b{ цвет: красный; }

Заключение

Так когда же все это пригодится? Ну, в сегодняшнем мире Аякса и когда-либо более крупные веб-приложения, способные загружать сопутствующие JavaScript/CSS файлы асинхронно и по запросу не только удобно, но и в некоторых случаях необходимый.