数据库中存放着HTML并附带样式,如何在界面上对已有的样式进行修改

在工作中遇到这样一个问题,数据库中存放着HTML代码,并且还带有样式,我要在界面上修改他已经写好的样式,例如把这个字段的字体改成微软雅黑,数据库中对应字段内容如下图

数据库中存放着HTML并附带样式,如何在界面上对已有的样式进行修改

在界面面上是直接把上图这段HTML,放到界面上,这里用到了ko就是Knockoutjs,,里面的那句data-bind:html:JobDesc 中的html:JobDesc 效果跟@Html.Raw() 效果一样,即使直接把数据库中的HTML代码插入到界面上。 代码如下图

数据库中存放着HTML并附带样式,如何在界面上对已有的样式进行修改

要改掉里面的样式:很简单就是去覆盖里面样式,问题不在这,插进去的这段HTML,其实是

<div class="col-xs-9 as" data-bind="html:JobDesc">
</div>

的后代元素,我们要去修改他的样式,就要这样写,用到了JQuery

$("div[class='col-xs-9 as']").find("*").css("font-family","Microsoft YaHei");

用到了这个方法find("*"),作用是  返回选中标签的所有后代。

这是一种情况,

还有一种情况是数据库中刚好这一段是没有HTML标签,只有文字,这种情况下就要加一句

$("div[class='col-xs-9 as']").css("font-family","Microsoft YaHei");

综合起来就是在js中加上下面的代码:

$(function(){
$("div[class='col-xs-9 as']").css("font-family","Microsoft YaHei");
$("div[class='col-xs-9 as']").find("*").css("font-family","Microsoft YaHei");
});