Javascript changing stylesheet css property [duplicate]

Question

first of all my english is not so good but i believe it will be enough for defining myself.
In style.css file

div.myclass
{
    width:20%;height:350px;background-color:#097;float:left;margin-right:5px;
}

in html file

<link rel="stylesheet" type="text/css" href="style.css">
<div class="myclass"></div>
<div class="myclass"></div>
<div class="myclass"></div>

U see, i have this divs and i want to change them background image with jquery.

I tried to use .css() function for it

$('div.myclass').css({'background-image':'url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAACCAYAAABytg0kAAAAEElEQVQIW2P8DwSMIMAABQA+HQQDNlbHLwAAAABJRU5ErkJggg==)'})

But function changing div to this

<div class="myclass" style="background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAACCAYAAABytg0kAAAAEElEQVQIW2P8DwSMIMAABQA+HQQDNlbHLwAAAABJRU5ErkJggg==);"></div>
<div class="myclass" style="background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAACCAYAAABytg0kAAAAEElEQVQIW2P8DwSMIMAABQA+HQQDNlbHLwAAAABJRU5ErkJggg==);"></div>
<div class="myclass" style="background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAACCAYAAABytg0kAAAAEElEQVQIW2P8DwSMIMAABQA+HQQDNlbHLwAAAABJRU5ErkJggg==);"></div>

I'm asking how can i change div css rule inside the stylesheet file

div.myclass
{
    width:20%;height:350px;background-color:#097;float:left;margin-right:5px;
}

to this

div.myclass
{
    width:20%;height:350px;background-color:#097;float:left;margin-right:5px;
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAACCAYAAABytg0kAAAAEElEQVQIW2P8DwSMIMAABQA+HQQDNlbHLwAAAABJRU5ErkJggg==);
}

It's possible, but why would you want to? The end result is the same. — Blazemonger
– Blazemonger, Commented Aug 19, 2014 at 17:32
@Blazemonger tny.cz/c5e3796a check this text and u understand why i want to — traBolics
– traBolics, Commented Aug 19, 2014 at 17:47
That doesn't answer anything; there's no technical reason to use one approach over the other. Gary Storey's answer is the approach you should probably use. — Blazemonger
– Blazemonger, Commented Aug 19, 2014 at 17:59
@Blazemonger i re-edit my question and how can i say, i think i cant clear define myself. becaue my english is not so good :/ — traBolics
– traBolics, Commented Aug 19, 2014 at 18:18
why is my question is marked duplicated. i do not duplicate. stackoverflow.com/questions/3164740/… this is different question :( — traBolics
– traBolics, Commented Aug 19, 2014 at 18:26

Community · Accepted Answer · 2017-05-23 10:26:18Z

1

Since javascript is client-side and only runs after resources from the server has been retrieved, there is no way to alter the css file on the server (if that's what you're asking). Using the css() function will alter the inline styles, ultimately overriding any external style sheets.

This answers it well: Can jQuery change css style definition? (not individual css of each element)

edited May 23, 2017 at 10:26

CommunityBot

11 silver badge

answered Aug 19, 2014 at 17:33

Fueled By Coffee

2,5797 gold badges33 silver badges45 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

traBolics Over a year ago

i tried but my browser have extension and they using css-file to. document.styleSheets[0] u see, that zero is not global value and it can be a bug for some browsers

Fueled By Coffee Over a year ago

I'd suggest sticking to the inline css then. It will accomplish the same thing.

Gary Storey · Accepted Answer · 2014-08-19 17:35:18Z

1

The simple answer is you shouldn't. You should use classes and swap them. But you could do this:

$('style').html('div { background-image: image.png; }');

answered Aug 19, 2014 at 17:35

Gary Storey

1,7822 gold badges15 silver badges19 bronze badges

2 Comments

traBolics Over a year ago

i can do that but i write this: jsbin.com/fizimihizabo/1/edit sample for definig myself. i use the solution for other project

traBolics Over a year ago

i re-edit my question, can you check it

Collectives™ on Stack Overflow

Javascript changing stylesheet css property [duplicate]

2 Answers 2

2 Comments

2 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

2 Comments

Linked

Related