仅在打印时显示div

时间:2015-06-22 07:09:21

标签: javascript html css

让我说我有

<div id="printOnly">
     <b>Title</b>
     <p>
        Printing content 
     </p>
</div>

是否可以在页面渲染时隐藏此div并仅在打印此div时显示?

8 个答案:

答案 0 :(得分:20)

你需要一些css

#printOnly {
   display : none;
}

@media print {
    #printOnly {
       display : block;
    }
}

答案 1 :(得分:8)

@media screen
{
    #printOnly{display:none;}
}

@media print
{
    #printOnly{}
}

答案 2 :(得分:4)

您应该使用媒体查询。

在你的情况下:

#printOnly {
    display: none;
}

@media print { 
    #printOnly {
        display: block;
    }
}

PS在这里查看http://www.joshuawinn.com/css-print-media-query/以获取浏览器支持

答案 3 :(得分:1)

您可以使用media="print"属性附加外部css样式表:

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

答案 4 :(得分:1)

我认为最好的解决方案是围绕不可打印的东西创建一个包装器:

<head>
    <style type="text/css">

    #printable { display: none; }

    @media print
    {
        #non-printable { display: none; }
        #printable { display: block; }
    }
    </style>
</head>
<body>
    <div id="non-printable">
        Your normal page contents
    </div>

    <div id="printable">
        Printer version
    </div>
</body>

答案 5 :(得分:1)

/*for printer*/
@media print {
    #printOnly { }
        /* write your css rules*/

}
/*for desktop*/
    @media screen {
    #printOnly { display: none;}
             /*for all display view*/                 
}

答案 6 :(得分:1)

@media screen { #printOnly:{display:none;} }
@media print{ #printOnly:{display:block;} }

答案 7 :(得分:0)

您需要媒体查询才能在打印和屏幕选项之间切换

private void btnLogin_Click(object sender, EventArgs e)
    {
        try
        {
            this.Hide();

            string Log_API = "http://api.retailbutton.co/WS/Service.php?Service=employeeLogin";
            if (LoginUser(Log_API))
            {
                logIn_Status = "true";
                GlolbalUtil.LogIn_Status = logIn_Status;
                frmDash frmDash = new frmDash();
                frmDash.Owner = this;
                frmDash.Show();
                txtUsername.Text = "";
                txtPassword.Text = "";
                //GlolbalUtil.accept_status = "1";
            }
            else
            {
                MessageBox.Show("Please Check Username and password");
                FrmLogin frmLogin = new FrmLogin();
                frmLogin.Owner = this;
                frmLogin.Show();
            }


        }

@media print {/ * for print option * /

frmDash

http://www.w3schools.com/css/css_mediatypes.asp