Изменение свойств CSS, связанных с конкретным текстом, из Javascript

Question

У меня есть свойство CSS (шрифт), которое мне нужно изменить с Javascript (в раскрывающемся списке). Однако этот шрифт следует использовать только при печати (печать @media).

Итак, javascript не может просто изменить значение шрифта, потому что это также повлияет на экран. Есть ли способ изменить ТОЛЬКО печатную версию свойства шрифта?

В качестве альтернативы можно ли использовать свойство CSS для ссылки на другое свойство?

Таким образом, в печатном CSS, я мог бы сказать, шрифт: printfont, а на экране CSS шрифт: 12. А затем измените значение printfont, и при печати будет изменен шрифт.

спасибо.

EDIT: Дело в том, что мне нужно изменить размер шрифта, который печатается в документе из раскрывающегося списка, но я не хочу менять размер шрифта, на который будет отображаться документ.

Answer 1

кажется, что вы хотите сделать, это myabe просто изменить или добавить класс к элементу с JS

<p class="inrto comicSans">this is the text to change</p> 

@screen p.intro {font-family:verdana;} 

@print p.comicSans {font-family:comic-sans;} 

Answer 2

Это интересная дилемма вы там происходит. С моей точки зрения, единственное, что я могу придумать, это добавить новый тег в заголовок, где ваш размер шрифта объявлен с помощью важного. Например, в ваших тегах:

<style type="text/css" media="print"> 

.printfont { 
    font-size: 16px !important; 
} 

</style> 

Это гарантирует, что новый размер шрифта будет иметь приоритет.

Ниже приведен очень простой пример того, как вы можете сделать это с яваскрипта

<script type="text/javascript"> 

    var inlineMediaStyle = null; 

    function changeMediaStyle() 
    { 
     var head = document.getElementsByTagName('head')[0]; 
     var newStyle = document.createElement('style'); 
     newStyle.setAttribute('type', 'text/css'); 
     newStyle.setAttribute('media', 'print'); 
     newStyle.appendChild(document.createTextNode('.printFont { font-size: 16px !important;}')); 

     if (inlineMediaStyle != null) 
     { 
      head.replaceChild(newStyle, inlineMediaStyle) 
     } 
     else 
     { 
      head.appendChild(newStyle); 
     } 
     inlineMediaStyle = newStyle; 
    } 

</script> 

Просто убедитесь, что у вас есть OnChange = «changeMediaStyle()» в качестве атрибута на вашем раскрывающемся списке. Кроме того, как отказ от ответственности в моем примере, я не учитываю такие вещи, как утечки памяти, поэтому вам придется самостоятельно решать эти проблемы.

Что касается вашего альтернативного вопроса, насколько мне известно, нет никакого метода для объявления/использования точных переменных CSS. Тем не менее, в настоящее время рекомендации там для него: http://disruptive-innovations.com/zoo/cssvariables/

Answer 3

Вы могли бы просто использовать JavaScript для переключения классов и имеют

@print { 
    .myPrintClass { font-family: serif; } 
} 
@screen { 
    .defaultClass { font-family: sans-serif; } 
} 

Answer 4

Хотя решения класса на основе будет полностью работать, вы можете также использовать Javascript для динамического добавления тега <link> на страницу. Например, если у вас есть:

stylesheet1.css:

@print * {font-family:verdana;} 

stylesheet2.CSS:

@print * {font-family:comicSans;} 

Вы могли бы использовать JQuery, чтобы сделать что-то вроде:

$(document.body).append("<link href='stylesheet2.css'/>"); 

(вы можете сделать это без JQuery тоже, но я забыл, что синтаксис и я слишком ленив, чтобы посмотреть его, -)).

Однако, если вы только меняете небольшие суммы, одна таблица стилей + разные классы, вероятно, лучший способ пойти; новое решение тега <link> стоит того, если у вас есть куча разных изменений стиля.