Удаление класса. Вопрос: удалить все встроенные стили и (большинство) классов из строки HTML

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

удаляет все классы у выбранных элементов.

удаляет классы class1, class2, ... у выбранных элементов.

удаляет классы, список которых возвращает заданная пользователем функция. Возвращаемое ей значение должно представлять из себя строку с перечислением классов через пробел. Функция вызывается отдельно для каждого из выбранных элементов. При вызове ей передаются следующие параметры: index — позиция элемента |в наборе , class — текущий класс(ы) элемента.

Примеры использования:

В действии

Пример демонстрирует работу функции removeClass с пользовательской функцией в качестве параметра. Удалим классы colored у всех элементов списка, кроме элемента, с индексом 2. Таким образом, цветным останется только он.

~lt~!DOCTYPE html~gt~ ~lt~html~gt~ ~lt~head~gt~ ~lt~script src="http://code.jquery.com/jquery-latest.js"~gt~~lt~/script~gt~ ~lt~style~gt~ #list{ width:260px; } .item{ width: 250px; height: 20px; margin: 2px; padding: 3px; background-color: #eee; list-style-type:none; } .colored{ background-color: #cceecc; } ~lt~/style~gt~ ~lt~/head~gt~ ~lt~body~gt~ ~lt~ul id="list"~gt~ ~lt~li class="item colored"~gt~0. Меркурий ~lt~/li ~gt~ ~lt~li class="item colored"~gt~1. Венера ~lt~/li ~gt~ ~lt~li class="item colored"~gt~2. Земля ~lt~/li ~gt~ ~lt~li class="item colored"~gt~3. Марс ~lt~/li ~gt~ ~lt~li class="item colored"~gt~4. Юпитер ~lt~/li ~gt~ ~lt~li class="item colored"~gt~5. Сатрурн ~lt~/li ~gt~ ~lt~li class="item colored"~gt~7. Уран ~lt~/li ~gt~ ~lt~li class="item colored"~gt~8. Нептун ~lt~/li ~gt~ ~lt~li class="item colored"~gt~9. Плутон ~lt~/li ~gt~ ~lt~/ul~gt~ ~lt~script~gt~ $("#list .item").removeClass(function(index, class){ if(index != 2) return "colored"; else return ""; }); ~lt~/script~gt~ ~lt~/body~gt~ ~lt~/html~gt~

См. также

.addClass() — добавление класса

Я начну с конца:
В моей программе на C # у меня есть строка, содержащая HTML, и я хотел бы удалить из элементов в этой строке все встроенные атрибуты стиля (style=".."), и все классы, начинающиеся с "abc".
Я готов использовать для этого регулярные выражения, хотя некоторые люди сука об этом :).

(объяснение, для тех, кто хочет меня вырубить за разбор строк HTML:
Я вынужден использовать некоторые менее оптимальные веб-элементы управления для моего проекта. элемент управления предназначен для использования на стороне сервера (т. е. с обратной почтой и всем этим), но я должен использовать его в вызовах ajax.
что означает, что я должен настроить его в коде, вызвать его Render() метод, который дает мне строку HTML и передает эту строку на клиентскую сторону, где она вставлена в DOM в соответствующем месте. К сожалению, я не смог найти правильную конфигурацию элемента управления, чтобы остановить его от рендеринга с этими бесполезными стилями и классами, поэтому я вынужден удалить их вручную. Пожалуйста, не ненавидите меня.)

2017-12-25 14:09

Ответы:

Попробуй это:

String html; string cleaned = new Regex("style=\"[^\"]*\"").Replace(html, ""); string cleaned = new Regex("(?<=class=\")([^\"]*)\\babc\\w*\\b([^\"]*)(?=\")").Replace(cleaned, "$1$2");

2017-12-26 23:46

Для всех, кого это интересует, я решил это без использования RegEx;
Скорее, я использовал XDocument для анализа html-

Private string MakeHtmlGood(string html) { var xmlDoc = XDocument.Parse(html); // Remove all inline styles xmlDoc.Descendants().Attributes("style").Remove(); // Remove all classes inserted by 3rd party, without removing our own lovely classes foreach (var node in xmlDoc.Descendants()) { var classAttribute = node.Attributes("class").SingleOrDefault(); if (classAttribute == null) { continue; } var classesThatShouldStay = classAttribute.Value.Split(" ").Where(className => !className.StartsWith("abc")); classAttribute.SetValue(string.Join(" ", classesThatShouldStay)); } return xmlDoc.ToString(); }

В этой статье мы расскажем о двух способах манипуляции с HTML class . В первом используется Javascript-свойство classList , а во втором задействуется библиотека jQuery . Для начала, взгляните на следующий код:

В нем представлена кнопка с событием onclick , которое позволяет переключать цвет кнопки. CSS-код определяет классы для установки цвета фона:

Blue { background: blue; } .red { background: red; }

Единственное, что здесь остается сделать, это реализовать функцию toggleColor() :

classList

У каждого элемента есть свойство classList , которое содержит в себе атрибуты HTML style class . Это свойство включает в себя методы, позволяющие добавлять или удалять классы:

Посмотреть пример

В приведенном выше примере используется три метода classList .

contains() – возвращает значение true , если у элемента имеется родительский класс. Если же его нет, то возвращается значение false ;
add() – добавляет заданный класс к элементу. Это действие игнорируется, если элемент уже содержит заданный класс;
Remove() — заданный класс, при его наличии, удаляется.

Эту задачу можно решить проще при помощи метода toggle() , который добавляет указанный атрибут class в HTML при его отсутствии, или удаляет его, если он уже применен:

function toggleColor() { document.getElementById("btn1").classList.toggle("blue"); document.getElementById("btn1").classList.toggle("red"); }

Посмотреть пример

При работе с несколькими классами их можно разделять запятыми:

document.getElementById("btn1").classList.toggle("blue”, “bold"); document.getElementById("btn1").classList.toggle("red”, “italics");

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

JQuery

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

function toggleColor() { $("#btn1").toggleClass("blue"); $("#btn1").toggleClass("red"); }

Посмотреть пример

Можно использовать addClass() , removeClass() и hasClass() для toggleColor() . Обратите внимание, что новые HTML style class можно перечислять через пробел в той же строке.

Пример:

$("#btn1").toggleClass("blue bold"); $("#btn1").toggleClass("red italics");

На этом все! Теперь вы знаете, как без труда изменять внешний вид DOM-элементов !

Перевод статьи “How to Add/Remove CSS classes using JavaScript ” был подготовлен дружной командой проекта .

Хорошо Плохо