0

我有一个简单的网页：

<html>
  <head>
    <title>...</title>
    <script ...></script>
    <link .../>
    <script>
      /* HERE */
    </script>
  </head>
  <body>
    <div id="cnt"></div>
  </body>
</html>

在 head 部分，我加载了jQuery脚本和Google Web Fonts字体样式。

我想动态添加内容到我的#cnt，我执行以下操作（下面的代码放置在之前打印的代码清单中突出显示的位置）：

$(document).ready(function(){
  var $el1 = $('<div  style=\'position:absolute;top:50px;left:425px;font-family:\'Oxygen\',sans-serif;font-weight:300;font-size:35px\'>Hello1</div>');
  var $el2 = $('<div  style=\'width:350px;height:200px;position:absolute;top:110px;left:425px;font-family:\'Open Sans\',sans-serif;font-weight:400;font-size:19px\'>Hello2.</div>');
  var $el3 = $('<div  style=\'width:350px;height:200px;position:absolute;top:110px;left:425px;font-family:\'Open Sans\',sans-serif;font-weight:400;font-size:19px\'>Hello3.</div>');
  var $el4 = $('<div id=\'imm\' style=\'position:absolute;top:-10px;left:-20px;background-image:url(\'images/imm.png\');width:399px;height:503px\'></div>');
  $('#main').append($el1); 
  $('#main').append($el2); 
  $('#main').append($el3); 
  $('#main').append($el4); 
});

但是，一旦显示的字体未按应有的样式设置样式（这意味着未应用 Google 字体，我的文本将使用默认设置显示，就好像指定的font-family不起作用一样）并且图像未加载。

我确信这很常见，但找不到关于这个问题的问题。该怎么办？

4

4 回答 4

1

JQuery 可以帮助您以更易读的方式做同样的事情（顺便避免一些头疼）。

  var $el3 = $('<div >Hello2.</div>')
                 .css({
                     'width':'350px',
                     'height':'200px',
                     'position':'absolute',
                     'top':'110px',
                     'left':'425px',
                     'font-family':"'Open Sans',sans-serif;font-weight:400;font-size:19px"});
于 2013-10-20T17:27:10.073 回答
1

那是因为你用引号把它搞砸了——你用 开始style属性的值'，然后'你的第一个font-family声明再次结束它。

只需对style属性的值使用双引号——你可以在没有任何转义的情况下这样做，因为 JavaScript 文本文字'用作分隔符——然后将转义的单引号保留为font-family：

var $el1 = $('<div  style="position:…;font-family:\'Oxygen\',sans-serif;…font-size:35px">Hello1</div>');
于 2013-10-20T16:56:19.093 回答
1

看起来是引号问题，试试

  var $el1 = $('<div  style="position:absolute;top:50px;left:425px;font-family:\'Oxygen\',sans-serif;font-weight:300;font-size:35px">Hello1</div>');
  var $el2 = $('<div  style="width:350px;height:200px;position:absolute;top:110px;left:425px;font-family:\'Open Sans\',sans-serif;font-weight:400;font-size:19px">Hello2.</div>');
  var $el3 = $('<div  style="width:350px;height:200px;position:absolute;top:110px;left:425px;font-family:\'Open Sans\',sans-serif;font-weight:400;font-size:19px">Hello3.</div>');
  var $el4 = $('<div id=\'imm\' style="position:absolute;top:-10px;left:-20px;background-image:url(\'images/imm.png\');width:399px;height:503px"></div>');
于 2013-10-20T16:56:33.467 回答
1

你是双引号单引号：

$('<div style=\'posiblablafont-family:\'Oxygen\',font-size:35px\'>Hello1</div>');
 USE " here ---^                                     AND HERE --^
于 2013-10-20T16:57:11.200 回答