Javascript <；Div样式=>；不改变字体

我正在使用以下脚本加载外部html文件：

   <script type="text/javascript">
        $(document).ready(function(){
           $("#page1").click(function(){
            $('#result').load('140314F00604.htm');
             //alert("Thanks for visiting!");
           });

           $("#page2").click(function(){
            $('#result').load('140314F029.htm');
             //alert("Thanks for visiting!");
           });

           $("#page3").click(function(){
            $('#result').load('140221F193.htm');
             //alert("Thanks for visiting!");
           });
         });
    </script>
      <table cellpadding="0" cellspacing="0" style="width: 100%; border-size: 1px">
        <tr>
          <td><a id="page1" href="#">About</a></td>
          <td><a id="page2" href="#">Community</a></td>
          <td><a id="page3" href="#">Sponsor</a></td>
        </tr>
      </table>

    <div id="result" style="color:red; font-style:italic; font-family:Arial; font-size:12px;"></div>

<pre>
    <div class="pre-div">
        Boland Athletics ...
        ...
    </div>
</pre>

$（文档）.ready（函数（）{
$（“#第1页”）。单击（函数（）{
$（'#result'）.load（'140314F00604.htm'）；
//警惕（“谢谢光临！”）；
});
$（“#第2页”）。单击（函数（）{
$（'#result'）.load（'140314F029.htm'）；
//警惕（“谢谢光临！”）；
});
$（“#第3页”）。单击（函数（）{
$（'#result'）.load（'140221F193.htm'）；
//警惕（“谢谢光临！”）；
});
});

它工作得很好。加载html文件，更改字体颜色、斜体和大小，但它似乎不想将字体本身更改为Arial

导入的HTML如下所示：

导入的html是由软件生成的，不能在程序中编辑，因此我尝试加载它并更改其格式

下面的脚本工作得很好。不幸的是，导入的html使用空格来对齐文本。这显然是不能改变的。如果您将字体从courier更改为可以在图像上看到的任何其他字体，工作脚本会弄乱间距。有可能解决这个问题吗

function applyPreFont(){
var oldHtml = $('#result pre').html();
$('#result pre').html('<div class="pre-div">' + oldHtml + '</div>');
}

function LoadExternalContent(pagename){
$('#result').load(pagename, function(data) {
    applyPreFont();
    // do other stuff
});
}

$(document).ready(function(){
$("#page1").click(function(){
    LoadExternalContent('140314F00604.htm');
});

$("#page2").click(function(){
    LoadExternalContent('140314F029.htm');
});

$("#page3").click(function(){
    LoadExternalContent('140221F193.htm');
});
});

函数applyprefent（）{
var oldHtml=$（'#result pre'）.html（）；
$（'#result pre'）.html（''+oldHtml+''）；
}
函数LoadExternalContent（pagename）{
$（“#结果”）.load（页面名称、函数（数据）{
applyPreFont（）；
//做其他事情
});
}
$（文档）.ready（函数（）{
$（“#第1页”）。单击（函数（）{
LoadExternalContent（'140314F00604.htm'）；
});
$（“#第2页”）。单击（函数（）{
LoadExternalContent（'140314F029.htm'）；
});
$（“#第3页”）。单击（函数（）{
LoadExternalContent（'140221F1193.htm'）；
});
});

原始html文件

脚本的输出

---

jquery中的$.load方法还有另一个重载，它在回调函数中传递。在文档中，“如果提供了‘完整’回调，则在执行后处理和HTML插入之后执行。”

我认为您应该将加载方法更改为：

$('#result').load('140221F193.htm', function(){
   //alert("Thanks for visiting!");
   //set css here
});

---

pre

不太接受css字体样式。

字体

属性将被忽略，甚至从父元素继承。即使尝试将其应用于父元素也不会起作用

更新1
注意事项：

pre

元素使用类型为

monospace

的字体（所有图示符具有相同的固定宽度），这使得表格数据更容易使用。大多数字体（如Arial、Helvetica、Verdana、Times New Roman等）不是单空格字体，因此，每个字形根据其宽度有自己的大小。 最后，如果应用非单空格字体，表格数据将不再是如此“表格”

您必须将css应用于

pre

中的子元素

当您使用jQuery（html是动态的）时，您可以使用jQuery将

pre

内容包装到一个新的

div

，并将CSS应用到它的新元素：

var oldHtml = $('#result pre').html();
$('#result pre').html('<div class="pre-div">' + oldHtml + '</div>');

---

**仅在Chrome中测试。

更新：

如果您希望所有内容都对齐（因为预先使用的是单空间字体），请尝试下载单空间版本的Arial（确保单击字体右侧的实际下载）

基于您接受的答案而不是删除pre标记的方式是通过css实现的：

 function applyPreFont(){
    var oldHtml = $('#result pre').html();
    $('#result pre').html("")
    $("<div />",{
    "class": "pre-div",
    html: oldHtml,
    css: {
    "font-family": "arialMono"
    }
    }).appendTo($('#result pre'));
    $('#result pre').html('<div class="pre-div">' + oldHtml + '</div>');

    }

通过Jquery函数（将字体添加到样式表后），它的实现方式如下：

$('#result').load('140221F193.htm', function(){
   $("#result pre").contents().unwrap()
});

这将删除PRE标记并成功呈现html:）

---

此处

如果加载在frame、iframe或object中，则主页或其他框架集中的CSS将不适用。CSS应用和

结果

标记的代码块在哪里？据我所知，javascript将html拉入，而不是frame或iframe。抱歉，它被切断了。结果标签如下所示：jquery文档中没有关于加载的地方说明html是在iframe中加载的。在我的脚本中，这将转到哪里？加载内容后，我已经更新了关于表格空间的问题的答案。

@font-face
{
font-family: arialMono;
src: url(/directory/locationOfFontFile.ttf);
}

.pre-div{
font-family: arialMono;
}

 function applyPreFont(){
    var oldHtml = $('#result pre').html();
    $('#result pre').html("")
    $("<div />",{
    "class": "pre-div",
    html: oldHtml,
    css: {
    "font-family": "arialMono"
    }
    }).appendTo($('#result pre'));
    $('#result pre').html('<div class="pre-div">' + oldHtml + '</div>');

    }

$('#result').load('140221F193.htm', function(){
   $("#result pre").contents().unwrap()
});