Avoid double quotes in jQuery inline css

Question

Whenever i add inline css with jQuery it will also change the format of the inline css which is already there. For example if i have a background image without any quotes in the url and i will add something like

$('.element').css('padding', '10px');

it will re-format the complete inline css. (also for example background-color: #ffffff; transfers to -> background-color: rgb(255,255,255);

Here is a little fiddle. https://jsfiddle.net/chickberger/ppas2zrh/1/

Iam guessing that this is just the jQuery / javscript syntax that gets applied to the inline styles. If thats the case is there any chance to avoid this? My main problem are the double quotes on the background image url.

Answer 1

It's not jquery, it's the browser.
Replace the code with $('.style-me')[0].style.padding = '10px' and nothing will change.

It happens in mozilla, it doesn't happen in chrome. And you can't do anything about it. Except maybe doing attributes like

$('.style-me').attr('style',
  $('.style-me').attr('style') + ';padding:10px'
)

which is bad idea.