javascript - 打印时不要使用 jQuery DOM 更改

Question

更新:下面的 CSS 解决方案。

我正在使用 fullpage.js不幸的是，jQuery 插件也会影响网页的打印，只显示当前视口(viewport)显示及其兄弟。

我遇到的问题是打印命令使用 DOM(很明显)，但插件已经在 DOM 中进行了内联 CSS 更改。有没有办法禁用 print 的 DOM 更改？

这行不通，但这是我的想法:

$(document).ready(function() {
    if(@media !print) { // PS: Not real code!
        $('#fullpage').fullpage();
    }
});

------ CSS解决方案------

Praveen's reply引导我走上正确的道路。覆盖 fullpage.js 内联样式所需的 CSS 是:

/* Override javascript inline styles */
html,
body {
    overflow: visible !important;
    height: auto !important;
}

.fullpage-wrapper {
    height: auto !important;
    transform: none !important;
    transition: none !important;
}

.fp-section {
    height: auto !important;
}

.fp-slidesContainer {
    width: auto !important;
    transition: none !important;
    transform: none !important;
}

.fp-slides,
.fp-slides * {
    position: static !important;
}

.fp-slide {
    width: auto !important;
}

Answer 1

在你的 CSS 中做这样的事情:

隐藏整页幻灯片:

.fp-slides {
  display: none;
}

或者使它们成为静态的，因为这将通过正常呈现内容来完成这些工作:

.fp-slides, .fp-slides * {
  position: static !important;
  /* I don't like putting !important,
     but there is no other way to override the inline styles without this!*/
}

否则，您可以指定样式表仅适用于screen作为媒体:

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