#javascript #jquery #css #string #dom
#javascript #jquery #css #строка #dom
Вопрос:
Итак, я ищу плагин jQuery или метод, использующий javascript в целом, где я могу получить свойства CSS из строки, не используя множество операторов If else, которые я должен написать. Строка берется из пользовательского ввода, например, из текстовой области. Пример:
var string = "#hello{border:1px #000 solid;background-color:#FFF;}";
Итак, в основном я хочу иметь возможность идентифицировать идентификаторы и классы из строки и их свойств. Итак, в этом случае есть идентификатор с именем Hello и что он имеет границу в 1 пиксель и цвет фона #FFF (белый). Затем информация будет добавлена к объекту, который будет помещен в массив. Есть ли плагин или способ, которым я могу это сделать? В каждой строке также будет несколько. Я знаю, это может показаться немного запутанным. Спасибо!
Комментарии:
1. Гм … почему бы вам просто не выполнить любую функцию, которую вы выполняете для каждого элемента, который соответствует идентификатору / классу?
2. Почему строка, какой источник вы анализируете?
3. Это происходит из поля ввода, которое пользователь собирается ввести. Таким образом, они вводят код, и он показывает все идентификаторы и класс с их свойствами отдельно. В основном, как средство проверки CSS, просто не настолько продвинутое.
4. Если вы используете PHP, вы можете просто
echoполучать полученные данные напрямую.
Ответ №1:
Кажется, вы хотите проанализировать правила стиля CSS и извлечь компоненты. Это не так уж сложно, поскольку общий синтаксис представляет собой селектор, за которым следует список из нулевых или более разделенных точками с запятой наборов пар имя: значение, разделенных двоеточием (т.е. селектор { свойство: значение; свойство: значение; …}).
Регулярное выражение должно сделать свое дело, однако оно может усложниться, если вы хотите, чтобы селектор полностью соответствовал текущему стандарту CSS 2.1.
Если все, что вам нужно, это один идентификатор и селекторы классов, тогда жизнь намного проще. Запуск такой функции:
function parseCSSRule(s) {
var a = s.indexOf('{');
var b = s.indexOf('}');
var selector = s.substring(0, a);
var rules = s.substring( a, b).split(';');
// Do something with the selector and the rules
alert(selector 'n' rules);
}
это отделит селектор от правил, а затем разделит правила в массив. Вам нужно будет иметь дело с небольшим количеством пробелов здесь и там, но в противном случае, если все, что вы хотите сделать, это применить (возможно, пустой набор) правил стиля к элементу, выбранному селектором, вот и все.
Вам просто нужно разделить каждое правило на двоеточие «:» и применить текст CSS к соответствующему свойству стиля, изменив имена через дефис на camelCase в процессах.
Редактировать
О, и если вам нужно действительно простое решение, просто добавьте правило в нижнюю часть последней таблицы стилей в документе. Таким образом, вам вообще не нужно его анализировать, просто поместите его и позвольте браузеру выполнить всю работу.
Комментарии:
1. Большое вам спасибо!! Мне было очень сложно попытаться придумать способ справиться с этим! Но вы получили это для меня, спасибо
Ответ №2:
Это может быть довольно тривиально, если вы запускаете javascript на отображаемой странице. Сначала получите список всех свойств CSS (список может быть довольно большим).
Затем вы делаете: (псевдокод)
var properties = []
foreach(property in css_properies)
{
var value = $('#hello').css(property)
if( value != "" )
properites.push(property ':' value)
}
Тогда нужная строка станет:
'#hello{' properties.join(';') '}'
Теперь список содержит все вычисленные стили, поэтому он может быть довольно большим. Более подробную информацию см. в методе css.
Ответ №3:
JSCSSP — это анализатор CSS, который, я считаю, должен быть способен делать именно то, что вы ищете. Пожалуйста, посмотрите на следующую ссылку:
Пожалуйста, скажите мне, похоже ли это на подходящее для вас решение. Спасибо.