I doubt the string concatenation is the culprit here, but you could always use the transform CSS property, which is supported in almost every recent browser.
Since most CSS transforms also use px values (for example: translate), you should use raw matrix coordinates.
So to offset an element by say x: 10px, y: 20px you would use:
transform: matrix(1, 0, 0, 1, 10, 20)
But since you're dealing with CSS properties, there's always going to be a string (the property value) that will be interpreted by the browser at some point. So I'm not sure if that's going to speed up things considerably.
Internally you could work with matrices as arrays, say:
var transformMatrix = [1, 0, 0, 1, 10, 20];
Then when it comes to rendering, assign it like so:
style.transform = "matrix(" + transformMatrix.join() + ")";
But as I mentioned previously, there's no way to avoid string concatenation/conversion at some point if you're dealing with CSS properties. Another thing to note is that the transform property requires a vendor-prefix in some browsers.
Libraries like jQuery will automatically generate the prefix for you, if you're not using such a library, you should consider these vendor-prefixes: -moz-, -ms-, -webkit-, -o-. A CSS declaration would then look like this:
.myElement {
-moz-transform: matrix(1, 0, 0, 1, 10, 20);
-ms-transform: matrix(1, 0, 0, 1, 10, 20);
-webkit-transform: matrix(1, 0, 0, 1, 10, 20);
-o-transform: matrix(1, 0, 0, 1, 10, 20);
transform: matrix(1, 0, 0, 1, 10, 20);
}
Which translates to the following JavaScript code:
style.MozTransform =
style.msTransform =
style.WebkitTransform =
style.OTransform =
style.transform = 'matrix(1, 0, 0, 1, 10, 20)';
But instead of doing that, you better figure out the required prefix of the browser beforehand and then just use the property that is supported by the browser. Here's a short explanation how to figure out vendor prefixes using JS.