Question

我正在使用以下脚本加载外部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>

完美无缺。加载html文件，更改字体颜色，斜体和大小，但似乎不想将字体本身更改为Arial。

导入的HTML如下所示： HTML Code

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

以下脚本完美无缺。不幸的是，导入的html使用空格来淡化文本。显然这是无法改变的。如果您将字体从快递更改为其他任何内容（如图像上所示），则工作脚本会混淆间距。解决这个问题是否可行？

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');
});
});

原始html文件

enter image description here

脚本

的输出

enter image description here

Answer 1

jquery中的$ .load方法有另一个在回调函数中传递的重载。在文档中，＆＃34;如果＆＃39;完成＆＃39;提供回调，它在后处理和执行HTML插入后执行。＆＃34;。

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

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

Answer 2

pre不接受css字体样式。 {} <}}属性将被绕过，甚至从父元素继承。即使尝试将其应用于父元素也不会起作用。

更新1
的注意：
fonts元素使用类型pre的字体（所有字形具有相同的固定宽度），这使得表格数据变得容易。大多数字体（如Arial，Helvetica，Verdana，Times New Roman ..）不是等宽字体，因此，每个字形根据其宽度具有自己的大小。最后，表格数据不会如此＆＃34;表格＆＃34;如果你应用非等宽字体，那就再来了。 More on MDN Docs

您必须将css应用于monospace中的后代元素。

当您使用jQuery（并且html是动态的）时，您可以使用jQuery将pre内容包装到新的pre中，并将CSS应用于其新元素：

div

产生如下结果：

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

我建议你这样编码：

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

CSS：

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'); }); });

See an example in fiddle

**仅在Chrome中测试。

Answer 3

<强>更新

如果您希望所有内容都对齐（因为PRE使用Mono Space字体），请尝试下载Monospace版本的Arial（Download Here，确保单击字体右侧的实际下载）

根据您接受的答案实现它的方式，而不是删除pre标签是通过css：

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

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

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

 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>');

    }

问题在于<pre>代码（Preformatted Text）。由于标签的性质，样式将是错误的。最好的办法是通过jquery删除Pre标签：

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

那应该删除PRE标签并成功渲染html：）

JSFidde这里

<div style =“”>不更改字体</div>

3 个答案: