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

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

在界面面上是直接把上图这段HTML，放到界面上，这里用到了ko就是Knockoutjs,,里面的那句data-bind：html:JobDesc 中的html:JobDesc 效果跟@Html.Raw() 效果一样，即使直接把数据库中的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");
});

 

转载于:https://www.cnblogs.com/ginaprogram/p/6855489.html