<Div style => не меняет шрифт

0

Я загружаю внешние 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 выглядит следующим образом: Изображение 174551

Импортированный 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 файл

Изображение 174551

Результат скрипта

Изображение 174551

  • 0
    если он загружен во фрейм, iframe или объект, CSS с главной страницы или другой набор фреймов не будут применяться.
  • 0
    где блок кода, к которому применяется CSS и тег result ?
Показать ещё 5 комментариев
Теги:
fonts

3 ответа

0
Лучший ответ

pre не принимает стиль шрифта css так хорошо. Свойства fonts будут обходить, даже унаследованы от родительских элементов. Даже попытка применить его к родительскому элементу не будет работать.

ОБНОВЛЕНИЕ 1
Внимание:
pre использует шрифт типа monospace (все глифы имеют одинаковую фиксированную ширину), что упрощает табличные данные. В основном шрифты (как Arial, Helvetica, Verdana, Times New Roman..) не моноширины, поэтому каждый глиф имеет свой собственный размер в соответствии с его шириной. В конце концов, табличные данные больше не будут "табулярными", если вы примените шрифт, не поддерживающий моноширину. Подробнее о документах MDN.

Вы должны будете применить css к элементу потомка в pre.

Поскольку вы используете jQuery (и html - динамический), вы можете обернуть pre контент в новый div с помощью jQuery и применить CSS к его новому элементу:

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

в результате чего-то вроде этого:

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

Я предлагаю вам код следующим образом:

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

CSS:

.pre-div {
    font-family: arial;
    font-weight: bold;
}

См. Пример в скрипке

** Проверено только в Chrome.

Поделиться
  • 0
    Куда в моем сценарии это пойдет?
  • 0
    после загрузки контента
Показать ещё 2 комментария
0

Метод $.load в jquery имеет другую перегрузку, которая проходит в функции обратного вызова. В документации "Если" полный "обратный вызов предоставляется, он выполняется после постобработки и вставки HTML.".

Я считаю, что вы должны изменить свои методы загрузки, чтобы они выглядели так:

$('#result').load('140221F193.htm', function(){
   //alert("Thanks for visiting!");
   //set css here
});
Поделиться
0

ОБНОВИТЬ:

Если вы хотите, чтобы все выровнялось (так как PRE использует шрифт Mono Space), попробуйте загрузить Monospace версию Arial (Загрузить здесь обязательно нажмите фактическую загрузку справа от шрифта)

способ, которым вы будете реализовывать его на основе вашего принятого ответа, а не удаление предварительного тега через 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> (предварительно форматированный текст). Стилирование, которое будет ошибкой из-за характера тегов. Лучше всего удалить теги Pre через jquery:

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

Это должно удалить теги PRE и успешно отобразить html :)

JSFidde Здесь

Поделиться

Ещё вопросы

Сообщество Overcoder
Наверх
Меню