#javascript #css
#javascript #css
Вопрос:
Существует ли условие для получения соответствующих имен?
Функция, которую я пишу, должна как задавать стиль с помощью element.style[propnameCamelCase] , так и извлекать существующее отображаемое значение с помощью document.defaultView.getComputedStyle(element,'').getPropertyValue(propname-regular) , и я вряд ли могу оправдать необходимость передачи двух отдельных, но семантически идентичных аргументов этой функции.
Я знаю, что для большинства из них это довольно простая транскрипция между camelCase и разделенными дефисом одними и теми же словами, поэтому я могу использовать регулярные выражения для их преобразования. Но, может быть, есть несколько, которые не похожи на это?
С головы до ног мне трудно понять, как обращаться с заглавными буквами для camel case с регулярными выражениями.
Редактировать: Ах, я мог бы использовать функцию для замены регулярных выражений, каждый раз, когда я вижу дефис, преобразуйте следующую букву в верхний регистр.
Комментарии:
1. свойства css обычно имеют дефисы, а не подчеркивания.
Ответ №1:
Таким образом, вы по сути заново изобретаете jQuery.css() . Возможно, взгляд на то, как jQuery решил проблему camelCase, может помочь: https://github.com/jquery/jquery/blob/master/src/core.js#L600
Комментарии:
1. Я думаю, если их решение действительно преобразовать в camelcase, то это то, что я сделаю:
function toCamelCase(variable) { return variable.replace(/-([a-z])/g,function(str,letter){ return letter.toUpperCase();});}2. Я не знаю ваших обстоятельств / условий / требований, но обычно неплохо использовать (такие широко распространенные и часто используемые) библиотеки, такие как jQuery. Обычно они учитывают вещи, о которых вы даже не знаете (например, IE неправильно использует префикс поставщика -ms). Я не проповедую jQuery, но у вас должны быть веские причины не использовать его (или dojo, или любую другую библиотеку, которая поддерживает вашу лодку).
3. И наоборот, jQuery — это огромная и часто медленная библиотека, которую вы можете не захотеть добавлять для одной функции
4. Я сталкивался с сайтами, на которых до четырех экземпляров разных версий jQuery загружались в различные iframe, созданные разными разработчиками, которые, вероятно, согласились, что «обычно неплохо использовать широко распространенную и часто используемую библиотеку». Помимо явного раздувания, это создает неизвестные, которые усложняют отладку. Одно это кажется мне веской причиной избегать использования jQuery в целом . Для создания прототипов это прекрасный инструмент, но при создании компонентов для более широкой веб-экосистемы это является помехой.
5. @rodneyrehm Водонепроницаемая причина не использовать jQuery заключается в том, что после его использования вы все еще даже не знаете о том, что вам нужно учитывать.
Ответ №2:
Я собирался задать вопрос об одном и том же (и я намеревался назвать его «Translate css names to from javascript аналоги»). Каким-то образом я закончил тем, что написал свое собственное решение.
function cssNameToJsName(name)
{
var split = name.split("-");
var output = "";
for(var i = 0; i < split.length; i )
{
if (i > 0 amp;amp; split[i].length > 0 amp;amp; !(i == 1 amp;amp; split[i] == "ms"))
{
split[i] = split[i].substr(0, 1).toUpperCase() split[i].substr(1);
}
output = split[i];
}
return output;
}
function jsNameToCssName(name)
{
return name.replace(/([A-Z])/g, "-$1").toLowerCase();
}
Ответ №3:
Я хотел бы упомянуть, что CSSStyleDeclaration.style.setProperty принимает имена свойств типа css / дефис без преобразования, как описано здесь
Попробуйте это свойство с переносом, например:
document.body.style.setProperty("background-color", "red");
Вы также можете сделать это:
document.body.style["background-color"] = "silver";
Эти подходы — если вы можете их использовать — могут быть проще.