CSS Style Property Names - Migrating from the regular version to the version of camelCase for JS

Is there any condition for getting the appropriate names?

The function I am writing is to set the style via element.style[propnameCamelCase] and get the existing display value via document.defaultView.getComputedStyle(element,'').getPropertyValue(propname-regular) , and I can hardly justify passing two separate , but semantically identical arguments to this function.

I know that for most of them this is a fairly simple transcription between camelCase and hyphens with the same words, so I can use regular expressions to convert them. But maybe there are a few that are not like that?

On top of my head, it’s hard for me to figure out how to deal with capital letters for a camel case with regular expressions.

edit : Ah, I could use the regex replacement function, every time I see a hyphen, we convert the next letter to uppercase.

+6
source share
2 answers

So, you are basically reinventing jQuery.css () . Maybe see how the jQuery solution solved the problem with camelCase: https://github.com/jquery/jquery/blob/master/src/core.js#L600

+5
source

I was going to ask a question about the same (and I intended to call it "Translate css names to \ from javascript analogs"). Somehow I ended up writing my own solution.

 function cssNameToJsName(name) { var split = name.split("-"); var output = ""; for(var i = 0; i < split.length; i++) { if (i > 0 && split[i].length > 0 && !(i == 1 && 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(/([AZ])/g, "-$1").toLowerCase(); } 
+1
source

Source: https://habr.com/ru/post/898985/


All Articles