JS 打印界面的CSS居中代码适用所有浏览器

代码如下:

function preview(oper) {
if (oper < 10) {
bdhtml = window.document.body.innerHTML;//获取当前页的html代码
sprnstr = "<!--startprint" + oper + "-->";//设置打印开始区域
eprnstr = "<!--endprint" + oper + "-->";//设置打印结束区域
prnhtml = bdhtml.substring(bdhtml.indexOf(sprnstr) + 18); //从开始代码向后取html

prnhtml = prnhtml.substring(0, prnhtml.indexOf(eprnstr));//从结束代码向前取html
window.document.body.innerHTML = prnhtml;
window.print();
window.document.body.innerHTML = bdhtml;
} else {
window.print();
}

}
#outer {
display:table;
height:400px;
#position:relative;
overflow:hidden;
}
#middle {
display:table-cell;
vertical-align:middle;
#position:absolute;
#top:50%;
}
#inner {
#position:relative;
#top:-50%;
}

<div id=”outer”>
<div id=”middle”>
<div id=”inner”>
<!–这里是要垂直居中的内容–>
</div>
</div>
</div>

赞 (0)

相关推荐

  • 一种基于浏览器的自动小票机打印实现方案(js版)

    1.使用场景 用户在浏览器做了某项操作后,自动打印小票. 2.测试方式 2.1 JavaScript实现 尝试了很多办法,最终都会出现一个弹出框,让用户选择打印机.不符合我们需求. 2.2 lodop 功能比较强大,但是收费的.暂不考虑. 2.3 PAZU 功能也很强大,免费许可.非常赞! 详情:http://www.4fang.net/article/tech/pazu_tprinter.html 实现过程: 2.3.1 打印详情页面 <!doctype html> <html>

  • JavaScript调用浏览器打印功能实例分析

    本文实例讲述了JavaScript调用浏览器打印功能的方法.分享给大家供大家参考.具体如下: 1. 通用型,支持IE,Firefox,Chrome... 复制代码 代码如下: window.print(); 2. 只支持IE打印: <script> var print=function(){ /** * WebBrowser.ExecWB(1,1) 打开 * Web.ExecWB(2,1) 关闭现在所有的IE窗口,并打开一个新窗口 * Web.ExecWB(4,1) 保存网页 * Web.Ex

  • js调用浏览器打印模块实现点击按钮触发自定义函数

    本文主要内容: 如果用浏览器自带的打印按钮,无法进行其余和打印相关的操作,如传递打印次数等等.所以需要把浏览器打印的功能保留并赋予到自己添加的按钮当中,可以在点击按钮的同时触发自定义的函数. 复制代码 代码如下: <input type="button" class="btnPrint" id="btnPrint" value="打印" /> <iframe frameborder=0 width="

  • ie浏览器使用js导出网页到excel并打印

    在一些要求不是很高的小项目中,可以使用一些虽不是通用且不是新技术但是确实可以很好实现功能的技术来实现这些功能.这样系统不是显示的很复杂,且可以方便维护. 新建一个exportPrint.html页面,里面的代码如下所示,就可以实现导出到Excel和打印网页. 复制代码 代码如下: <html> <head>  <title>IE浏览器使用JS技术导出到Excel和打印</title>  <style>   .table_stat {    bor

  • js实现浏览器的各种菜单命令比如打印、查看源文件等等

    复制代码 代码如下: input type="button" onclick="document.execCommand('open')" value=打开 input type="button" onclick="document.execCommand('saveas')" value=保存 input type="button" onclick="document.execCommand('

  • IE浏览器打印的页眉页脚设置解决方法

    IE浏览器打印的页眉页脚设置解决方法

    首先说明问题:默认情况下,通过IE的打印对话框,打印出来的内容都有页眉和页脚的. 查看ie的页面设置发现如右图中,页眉页脚.下面先说明&w&bPage&p of &P , &u&b&d的含义 &w - 窗口标题 &u - 页面地址 &d - 短日期格式,如10/12/2006 &D - 长日期格式,如Tursday, October 12, 2006 &t - 12小时制时间 &T - 24小时制时间

  • JS 打印界面的CSS居中代码适用所有浏览器

    复制代码 代码如下: function preview(oper) { if (oper < 10) { bdhtml = window.document.body.innerHTML;//获取当前页的html代码 sprnstr = "<!--startprint" + oper + "-->";//设置打印开始区域 eprnstr = "<!--endprint" + oper + "-->"

  • 用js实现的DIV+CSS编辑器代码

    DIV+CSS编辑器 var sInitColor = null; function callColorDlg(obj){ if (sInitColor == null) var sColor = dlgHelper.ChooseColorDlg(); else var sColor = dlgHelper.ChooseColorDlg(sInitColor); sColor = sColor.toString(16); if (sColor.length 在线DIV+CSS编辑器 类/标签/I

  • js获取某元素的class里面的css属性值代码

    js获取某元素的class里面的css属性值代码

    用js如何获取div中css的 margin.padding.height.border等.你可能说可以直接用document.getElementById("id").style.margin获取.但是你说的只能获取直接在标签中写的style的属性,无法获取标签style外的属性(如css文件中的属性).而下面方法则两者值都可以获取.实例效果图如下: js在获取css属性时如果标签中无style则无法直接获取css中的属性,所以需要一个方法可以做到这点.getStyle(obj,at

  • css和js实现弹出登录居中界面完整代码

    css和js实现弹出登录居中界面完整代码

    我实现的这个和许多网站上的登录弹出窗口差不多,大家举一反三,先看我写完后的结果. 点击创建相册后 会在这个屏幕的中间显示创建相册的表单,整个背景颜色变暗,点击右上角的X会关闭这个表单. html代码 创建按钮 <li id="create"><a href="#form" rel="external nofollow" ><span>创建相册</span></a></li>

  • DIV+CSS+JS不间断横向滚动实现代码

    DIV+CSS+JS实现不间断横向滚动代码 复制代码 代码如下: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>横向不间断滚动DIV CSS代码-DIVCSS5</title> </head> <body>

  • JS点击缩略图整屏居中放大图片效果

    JS点击缩略图整屏居中放大图片效果

    需要实现的效果图: 今天开发的时候,遇到要点击缩略图之后居中显示图片的大图查看(大致效果如上图所示)~想了好几种实现方式,最开始的时候,是想通过animate来点击图片进行显示,可是后来当我想要让放大的图片进行居中显示和点击别的地方隐藏已显示的大图的时候,才发现实现起来有难度. 1 第一张点击图片将图片放大 下面将这种方式也贴出来,供自己参考(万一有需要的小伙伴正好需要这样的功能呢): <div> <img class="dialog" src="xxx.j

  • 原生JS实现N级菜单的代码

    原生JS实现N级菜单的代码

    需求分析 简单的分析一下,要实现N级菜单,首先从布局入手,即判断是否有下级菜单 1.没有下一级菜单,直接排列 2.有下级菜单,又分为下级菜单排放位置,和在上级菜单显示类似 '>' 的符号,效果如图: 图:1  初步实现 1.实现是否存在   > 注意: 下面凡是担忧 xxx===yyy ? xxx : xxx都是利用三元表达式,来表达思路. HTML结构如下: 图:2 •要实现图一的效果,我们只需要判断li标签里面的children.length===2 ? 'span存在' : 'span移

  • 使用D3.js构建实时图形的示例代码

    首先你需要在计算机上安装Node和npm. 数据的可视化表示是传递复杂信息的最有效手段之一,D3.js提供了创建这些数据可视化的强大工具和灵活性. D3.js是一个JavaScript库,用于使用SVG,HTML和CSS在Web浏览器中生成动态的交互式数据可视化. D3 提供了各种简单易用的函数,大大简化了 JavaScript 操作数据的难度.由于它本质上是 JavaScript ,所以用 JavaScript 也是可以实现所有功能的,但它能大大减小你的工作量,尤其是在数据可视化方面,D3 已

  • 老生常谈JS中的继承及实现代码

    JS虽然不像是JAVA那种强类型的语言,但也有着与JAVA类型的继承属性,那么JS中的继承是如何实现的呢? 一.构造函数继承 在构造函数中,同样属于两个新创建的函数,也是不相等的 function Fn(name){ this.name = name; this.show = function(){ alert(this.name); } } var obj1 = new Fn("AAA"); var obj2 = new Fn("BBB"); console.lo

  • Vue.js实现输入框绑定的实例代码

    Vue.js实现输入框绑定的实例代码

    实现效果如下: 实现代码及注释 <!DOCTYPE html> <html> <head> <title>vue.js数据动态编辑</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style type=

随机推荐