javascript - Trying to create a print page that only shows 3 divs -
I am trying to write a code that hides all the elements of a page in addition to three divs. This is because people will have a friendly version of the printer. I wrote it in jQuery but (this is political with our vendor) it will not work.
Here is the code:
& lt; Script type = 'text / javascript' & gt; Function prints () {document.getElementsByTagName ("body"). Style.display = "none"; Document.getElementById ("hider"). Style.display = "inline"; Document.getElementById ("hider1"). Style.display = "inline"; Document.getElementById ("hider2"). Style.display = "inline"; }; & Lt; / Script & gt; When clicking on a button called the print function, I have been able to create a Divis Display but everything is not working to rotate. Any ideas?
I think I am using getElementsByTagName incorrectly, but I am unsure.
you is getElementsByTagName incorrectly ( It returns a node list , which does not contain the style property), but this is just stopping your one separate problem: if you have body , it does not matter if you inside body , it will not be shown. This is done better with CSS using print style sheets: print Whatever I want to do, I use a class to hide anything that you do not want to print. In fact, I'm known to use two classes: print and no-print . Print means "I only want to print it" and no-print means "I only want to see it when not Printing " Both the screen and the printing are shown on which the item does not contain one class or the other. You only use this with the top-level of the question. The rules look like this:
@ media is not printed {print. {Display: none; }} @ Media print {.no-print {display: none; }} Example:
& lt ;! DOCTYPE html & gt; & Lt; Html & gt; & Lt; Top & gt; & Lt; Meta charset = "UTF-8" & gt; & Lt; Title & gt; Example & lt; / Title & gt; & Lt; Style & gt; Do not print @ media. Print {display: none; }} @ Media print {.no-print {display: none; }} & Lt; / Style & gt; & Lt; / Head & gt; & Lt; Body & gt; & Lt; P & gt; On-screen and print & lt; / P & gt; & Lt; P class = "print" & gt; Only shows when printing & lt; / P & gt; & Lt; P class = "no-print" & gt; Only shows when & lt; Strong & gt; No & lt; / Strong> Print & lt; / P & gt; & Lt; / Body & gt; & Lt; / Html & gt; On the screen, you can see it: shows both on-screen and when printing shows during printing While printing, you see this:
Both display on screen and when only showing the print Note the strong element in the example. Its visibility is determined by its container.
Comments
Post a Comment