0

I am trying to change "transform" css property of element, using jQuery:

myBlock.css('-webkit-transform', 'rotate(' + angle + 'deg)');
myBlock.css('-moz-transform', 'rotate(' + angle + 'deg)');
myBlock.css('-ms-transform', 'rotate(' + angle + 'deg)');
myBlock.css('-o-transform', 'rotate(' + angle + 'deg)');
myBlock.css('transform', 'rotate(' + angle + 'deg)');

I want to see all of these properties applied to element, but the result is only

transform: rotate(45ged);

I tried JavaScript style, but it does not help too:

myBlock.style.WebkitTransform = "rotate(" + angle + "deg)";

Applied style is the same, as in previous example. I found information, that modern jQuery versions (from 1.8) remove prefixes automatically. But why JS-style removes vendor properties? To write all of these in one "attr('style', 'properties')" string is not a solution, because in this case it removes existing styles. So the question is: how to apply all transform properties, using JS or jQuery? Thanks for any help.

Edit: the goal is to have prefixed properties in saved html after executing JS command, not just to execute JS command and rotate div on angle's value.

Sergey Shambal
  • 33
  • 9
  • Here you might find what you need: https://stackoverflow.com/questions/8889014/setting-vendor-prefixed-css-using-javascript – Nine Magics Aug 30 '17 at 18:02
  • @NineMagics Thanks for your response, but the problem is not to reduce the number of lines in code. The problem is that jQuery and JS omit vendor properties and write only standard "transform". I tried jQuery-Css3-Finalize (the last answer by your link), but also nope. – Sergey Shambal Aug 30 '17 at 18:27
  • What do you try to achieve? In which browsers your `transform` doesn't apply? – sergdenisov Aug 30 '17 at 19:32
  • @SergeyDenisov In android 4.4 webview. It does not understand "transform". Only -webkit-transform. The goal is to rotate in browser (chrome, for example) and view it on android 4.4. – Sergey Shambal Aug 30 '17 at 20:10
  • @SergeyShambal have you tried this code on the device's browser? I've just tried on Android 4.4 emulator with default browser and [this fiddle](https://jsfiddle.net/sergdenisov/tnuwkspg/) works well. – sergdenisov Aug 30 '17 at 20:53
  • @SergeyDenisov Sure, I have tried it. Click "Inspect" on the div. You'll see, there is only `transform: rotate (45deg);`. – Sergey Shambal Aug 31 '17 at 07:54
  • @SergeyShambal it doesn't matter what you see in Chrome Inspector. Android browser has no inspector, how did you debug it? – sergdenisov Aug 31 '17 at 09:21
  • @SergeyDenisov I am talking not about browser, but about webview component in application. Android webview version 4.4 requires -webkit-transform. – Sergey Shambal Aug 31 '17 at 10:31
  • @SergeyShambal I perfectly understand. Did you tested this code : `myBlock.style.WebkitTransform = "rotate(" + angle + "deg)";` on the webview? You don't need to see all prefixed properties in your Chrome Devtools, you need this code to work. I tested this code on Android 4.4 default browser (it also requires `-webkit`-prefixed property) and it works. – sergdenisov Aug 31 '17 at 11:17
  • @SergeyDenisov Angle is changed in any PC browser => "tranform: rotate(45deg);" is added to styles => trying to open saved html in android 4.4 => no result. No JS is executed on android side. Only open saved html. That is why I need prefixed style saved BEFORE opening on android. – Sergey Shambal Aug 31 '17 at 17:37
  • @SergeyShambal oh, you must notice that moment in the question. I don't know why do you do it this way, seems like strange application architecture, but I think in your case there is no other option as use `style` attribute. – sergdenisov Aug 31 '17 at 18:44

2 Answers2

0

Perhaps you could first retrieve the style attributes, append your own, and then set it again on the element. 

var value = element.getAttribute('style');
value += 'your new style attributes';
element.setAttribute('style', value);
Julio Feferman
  • 2,658
  • 3
  • 15
  • 26
  • I thought about it. But what to do, when angle changes again? It will be a lot of parsing. – Sergey Shambal Aug 30 '17 at 20:13
  • I guess I would need to understand better what the application is here. If you're trying to animate an element than you could go with css3 animation using keyframes and use js to add a style class that triggers the animation. Otherwise, the method I propose wouldn't be much more parsing than some alternative method, since you still need to create a string based on `angle` and inject it into the style attribute. – Julio Feferman Aug 30 '17 at 20:55
  • No animation. Need only to change angle of the div on required. – Sergey Shambal Aug 31 '17 at 07:58
0

So, I have not found any good solution, except to modify "style" string. Here is it:

myBlock.css('transform', 'rotate(' + angle + 'deg)');
// Fix for old android versions:
var blockStyle = myBlock.attr('style');
if (blockStyle.indexOf('-webkit-transform') === -1) {
    blockStyle += " -webkit-transform: rotate(" + angle + "deg);";
}
myBlock.attr('style', blockStyle);

The first line of code overwrites all transform properties, including prefixed. After its execution there will be no -webkit-transform part in style string. Then we add it.

In case of there still will be -webkit-transform in style string somehow after the first command (for me it never happen in modern Chrome, Firefox and Edge), I have else statement, a little bit ugly, but it works.

var blockStyle = myBlock.attr('style');
if (blockStyle.indexOf('-webkit-transform') === -1) {
    blockStyle += " -webkit-transform: rotate(" + angle + "deg);";
} else {
    var blockStyleArrayOriginal = blockStyle.split('-webkit-transform: rotate(');
    blockStyle = blockStyleArrayOriginal[0].trim() + " -webkit-transform: rotate(" + angle + blockStyleArrayOriginal[1].substring(blockStyleArrayOriginal[1].indexOf('deg)'));
}
myBlock.attr('style', blockStyle);
Sergey Shambal
  • 33
  • 9