Internet Explorer: как изменить CSS во время выполнения для печати? - PullRequest
Новая
       1

Internet Explorer: как изменить CSS во время выполнения для печати?

2 голосов
/ 23 февраля 2011

Представьте себе веб-страницу, которая позволяет пользователям отображать скрытый элемент, используя javascript для изменения CSS стиля CSS во время выполнения.

После своего решения (которое включает в себя изменение таблицы стилей) пользователь использует функции печати своего браузера.

Похоже, Internet Explorer не учитывает изменения, внесенные в таблицу стилей ранее во время печати , если исходное определение CSS находится во внешнем файле. В других браузерах все работает как положено.

Пожалуйста, посмотрите на пример ниже, который меняет класс стиля с его начального определения display:none на display:inline во время выполнения, поэтому элемент будет отображаться. Но при печати этой страницы элемент остается скрытым в Internet Explorer (протестировано с IE 6,7,8).

У вас есть решение или обходной путь?

Минималистичный пример (файл html): 

<html><head>
<LINK rel="stylesheet" type="text/css" href="minimal.css">
</head><body onload="displayCol();">
<script>
function displayCol()
{
     var myrules;
     if( document.styleSheets[0].cssRules ) {
              myrules = document.styleSheets[0].cssRules;

     } else {
        if ( document.styleSheets[0].rules ) {
            myrules = document.styleSheets[0].rules;
            }
        }
      myrules[0].style.display = "inline";  
}
</script>

<div class="col0" id="test">This is hidden by default.</div></body></html>

minimal.css 

.col0 {
  display:none;
}

UPDATE:

Обратите внимание, что решение о том, должен ли объект отображаться или нет, принимается пользователем - оно не известно во время выполнения!

Ответы [ 5 ]

3 голосов
/ 23 февраля 2011

Рассматривали ли вы возможность использования media = print, чтобы браузер использовал таблицу стилей специально для печати?

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

Если изменения css, которые вы вносите, всегда одинаковыто есть вы можете технически хранить их в отдельном файле CSS, затем вы можете использовать это.

Для нестатического CSS в IE (не уверенный в других браузерах / более поздних версиях IE), вы можете рассмотреть возможность использованиясобытие onbeforeprint.

Смотрите здесь: http://www.javascriptkit.com/javatutors/ie5print.shtml

1 голос
/ 23 февраля 2011

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

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <title>Demo</title>
    <style type="text/css">
        .col0 {display:none;}
        div.showCol {display: inline;}
    </style>
    <script type="text/javascript">
        function displayCol() {
            document.getElementById("test").className += " showCol";
        }
    </script>
</head>
<body onload="displayCol();">
    <div class="col0" id="test">This is hidden by default.</div>
</body>
</html>

Этот ответ на другой вопрос отлично справляется с изложением различных способов сделать это с помощью сценариев: Изменить класс элемента с помощьюJavaScript

0 голосов
/ 25 августа 2011

Исходя из вашего примера сценария - в таблицу стилей добавьте: 

.col0 {
    display: none;
}

body.showColumn .col0 {
    display: inline;
}

Затем просто переключите класс .showColumn на своем теле, и видимость столбца будет соответственно переключена.

0 голосов
/ 23 февраля 2011

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

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

0 голосов
/ 23 февраля 2011

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

<link rel="stylesheet" type="text/css" href="print.css" media="print" />

РЕДАКТИРОВАТЬ - слишком медленно:)

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...