Как динамически загружать файл CSS

В моем .css-файле я использую тип носителя печати, чтобы определить макет страницы при печати. Однако для одного из моих проектов я столкнулся с проблемой, когда некоторые принтеры не могут иметь дело с изображениями, границами, непрозрачностью и т. Д. Это означает, что я должен реализовать два макета печати. Один из них позволит сценарию обычной печати, а другой - разрешить печать обычного текста.Как динамически загружать файл CSS

Я рассматриваю возможность выпадающего списка, чтобы пользователь мог решить, когда печатать. Мне просто интересно, как «перегрузить» печать @media или динамически загружать файл css, который определяет эту разметку.

Если возможно, это должно быть достигнуто в Javascript.

источник

2015-12-10 Redesign1991

-2

Я попробую помочь вам. Итак, давайте покажем вам простой пример, который позволит вам выбрать цвет текста печатной страницы в соответствии с нажатой кнопкой.

пример страницы:

<head> 
    <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-2.1.0.js"></script> 
    <style type="text/css"> 
    @media print { 
     button { 
     display: none; 
     } 
    } 
    @media screen { 
     .black{ 
     color: black; 
     } 
     .blue{ 
     color: blue; 
     } 
    } 
    </style> 
</head>

Ничего особенного здесь, мы просто загружаются JQuery и добавляя некоторые стили, которые скрывают кнопки на печатной странице, а окраска их на экране.

Теперь тело страницы:

<body> 
    <p>www.stackoverflow.com</p> 
    <button class="black">print this page in black</button> 
    <button class="blue">print this page in blue</button> 
    <style type="text/css" media="print" id="print"></style> 
</body>

Здесь мы имеем содержание страницы, кнопку и пустой тег стиля, который специально предназначается для печатных СМИ, который остается пустым и будет заполняться с нашими пользовательскими стилями во время выполнения.

код Javascript является:

$(function() { 
    var buttons  = $('button'); 
    var printStyle = $('#print'); 
    var style; 

    buttons.click(function() { 
    style = 'p { color: ' + $(this).attr('class') + '};'; 
    printStyle.text(style); 
    window.print(); 
    }); 
});

Когда мы нажимаем на одну из кнопок код находит цвет, который мы хотим, он заполняет пустой тег стиля с пользовательскими стилями, а затем откроет браузер интегрирован интерфейс печати.

Пример можно найти здесь:

Example print colors

Увидимся скоро! Markus

источник

2015-12-10 14:11:03

Вам не нужно перегружать это. Вместо того, чтобы использовать id для <link />:

<link rel="stylesheet" href="print.css" media="print" id="printCss" />

И вам нужно, чтобы запустить старый принтер. Таким образом, вы должны иметь кнопку, скажем, Старый и он должен переключить его:

<button onclick="switch()">Old</button>

А теперь часть JavaScript:

Это загрузить старый CSS. Кроме того, вам не нужно использовать дополнительные теги <link />.

источник

2015-12-10 14:13:42

Как динамически загружать файл CSS

ответ

Смежные вопросы