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>

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>

• javascript
• jquery
• css

• 2 can you give more code context? – DaFois Commented Dec 7, 2018 at 13:46
• 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 Commented Dec 7, 2018 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 How to Ask – charlietfl Commented Dec 7, 2018 at 13:51
• Possible duplicate of Changing CSS Values with Javascript – maxshuty Commented Dec 7, 2018 at 13:51
• I've added some more context, is it clear now? – Kevin Tad Commented Dec 7, 2018 at 13:57

3 Answers 3

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 puted 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./ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="myDiv">Test</div>

With jQuery:

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

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./jquery-3.3.1.js"></script>