Avoid double quotes in jQuery inline css

Question

Whenever I add inline css with jQuery, it will also change the inline css format that already exists. For example, if I have a background image without quotes in the url, and I add something like

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

it reformatts the full inline css. (also, for example, background-color: #ffffff; transfers to → background-color: rgb(255,255,255);

Here is a small violin. https://jsfiddle.net/chickberger/ppas2zrh/1/

I assume this is just jQuery / javscript syntax that applies to inline styles. If this is the case, is there a chance to avoid this? My main problem is double quotes on the background image url.

Answer 1

This is not jquery, this is a 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 there is nothing you can do about it. With the possible exception of attributes such as

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

It is a bad idea.

Answer 2

Typically, attribute changes occur in jQuery . It overwrites the attribute in the DOM with this format.

You can use single quotes or escaped quotes in your CSS inline background rule

 style="background-image: url('single/quotes/around/the/path');"