使用JavaScript编辑内嵌样式

Question

是否可以使用javascript更改此内联样式？

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

我似乎无法在主题文件中找到代码的来源。

这是原始的html：

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

Answer 1

JavaScript ：使用HTMLElement.style属性：

  

HTMLElement.style属性用于获取和设置元素的内联样式。

请注意骆驼案对财产名称的使用。

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

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

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

jQuery ：使用.css()方法：

  

获取匹配元素集中第一个元素的计算样式属性值，或者为每个匹配元素设置一个或多个CSS属性。

$('#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>

Answer 2

使用jQuery：

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

Answer 3

轻松使用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>