Edit inline styling with javascript

Question

is there a way to change this inline styling with javascript?

element.style {
    background-color: rgb(125, 210, 195);
}

I can't seem to find the origin of the code in my theme files.

This is the raw html:

<span class="qodef-post-image-overlay" style="background-color: rgb(125, 210, 195);"></span>

It really depends on what you're trying to do, but you may want to look into media queries and/or pointer-events. As long as you're not getting too crazy you can probably achieve whatever you're trying to do without JavaScript. — maxshuty, Dec 07 '18 at 13:50
Question is not clear at all. Not clear if you are trying to override that inline style or add it or why you can't use css. Take a few minutes to read through [ask] — charlietfl, Dec 07 '18 at 13:51
Possible duplicate of [Changing CSS Values with Javascript](https://stackoverflow.com/questions/566203/changing-css-values-with-javascript) — maxshuty, Dec 07 '18 at 13:51

Mamun · Answer 1 · 2018-12-07T14:15:48.020

JavaScript: Use HTMLElement.style property:

The HTMLElement.style property is used to get as well as set the inline style of an element.

Please notice the camel case use of property name.

element.style.backgroundColor= "rgb(125, 210, 195)";

document.getElementById('myDiv').style.backgroundColor= "rgb(125, 210, 195)";

<div id="myDiv">Test</div>

jQuery: Use .css() method:

Get the value of a computed style property for the first element in the set of matched elements or set one or more CSS properties for every matched element.

$('#myDiv').css({"background-color":"rgb(125, 210, 195)"});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="myDiv">Test</div>

score 1 · Answer 2 · edited Dec 07 '18 at 13:47

1

With jQuery:

$(element).css("background-color", "rgb(125, 210, 195)");

edited Dec 07 '18 at 13:47

treyBake

6,440
6
26
57

answered Dec 07 '18 at 13:47

pjones235

540
2
18

score 1 · Answer 3 · edited Dec 07 '18 at 13:48

1

easy with jquery.

$(document).ready(function(){
  $('.element').css('background-color','rgb(250,100, 100)');
});

.element {
    background-color: rgb(125, 210, 195);
    height:300px;
    width:400px;
}

<div class="element">
</div>

<script src="https://code.jquery.com/jquery-3.3.1.js"></script>

edited Dec 07 '18 at 13:48

treyBake

6,440
6
26
57

answered Dec 07 '18 at 13:48

doğukan

23,073
13
57
69

Edit inline styling with javascript

3 Answers3