एचटीएमएल डोम स्टाइल पेजब्रेक संपत्ति के लौटने से पहले और एचटीएमएल दस्तावेज़ में एचटीएमएल तत्व से पहले पूर्वावलोकन या प्रिंट पूर्वावलोकन के लिए पेज-ब्रेक व्यवहार को संशोधित करता है।
सिंटैक्स
निम्नलिखित वाक्य रचना है -
1. रिटर्निंग पेजBreakBefore
object.pageBreakBefore
2. पृष्ठ को संशोधित करनाBreakBefore
object.pageBreakBefore = “value”
यहां, मान हो सकता है -
| मान | स्पष्टीकरण |
|---|---|
| आरंभिक | इसने इस गुण मान को उसके डिफ़ॉल्ट मान पर सेट किया। |
| उत्तराधिकारी | यह अपने मूल तत्व से यह गुण मान प्राप्त करता है |
| स्वतः | यदि आवश्यक हो तो यह HTML दस्तावेज़ में तत्व से पहले एक पृष्ठ विराम सम्मिलित करता है। |
| हमेशा | यह हमेशा HTML दस्तावेज़ में तत्व से पहले एक पृष्ठ विराम सम्मिलित करता है। |
| से बचें | यह HTML दस्तावेज़ में तत्व से पहले एक पृष्ठ विराम से बचता है। |
| बाएं | इसमें अगले पृष्ठ को बाएं पृष्ठ के रूप में माना जा सकता है जब तत्व से पहले एक या दो पेज ब्रेक डाले जाते हैं |
| दाएं | इसमें अगले पृष्ठ को एक सही पृष्ठ माना जा सकता है जब तत्व से पहले एक या दो पृष्ठ विराम डाले जाते हैं। |
| खाली स्ट्रिंग(“”) | यह HTML दस्तावेज़ में तत्व से पहले एक पृष्ठ विराम सम्मिलित नहीं करता है। |
आइए HTML DOM स्टाइल पेज का एक उदाहरण देखेंप्रॉपर्टी से पहले तोड़ें -
उदाहरण
<!DOCTYPE html>
<html>
<style>
body {
color: #000;
height: 100vh;
background-color: #8BC6EC;
background-image: linear-gradient(135deg, #8BC6EC 0%, #9599E2 100%);
}
.btn {
background: #db133a;
border: none;
height: 2rem;
border-radius: 2px;
width: 40%;
display: block;
color: #fff;
outline: none;
cursor: pointer;
margin: 1rem auto;
}
p {
text-align: center;
}
</style>
<body>
<h1 style="text-align:center">DOM Style pageBreakBefore Property Demo</h1>
<p>
Hi! I'm a para element with some dummy text. Hi! I'm a para element with some dummy text.
</p>
<p class="page-break">
Hi! I'm second para element with some dummy text. Hi! I'm a second element with some dummy text.
</p>
<button onclick="set()" class="btn">Break Page Here</button>
<p>
Hi! I'm another para element with some dummy text. Hi! I'm another para element with some dummy text.
</p>
<script>
function set() {
document.querySelector(".page-break").style.pageBreakBefore = "always";
}
</script>
</body>
</html> आउटपुट
अब प्रिंट पूर्वावलोकन खोलें और देखें कि हमारा html पृष्ठ कैसे प्रदर्शित होगा।
अब “लाल . पर क्लिक करें “वेब पेज पर उपलब्ध बटन और फिर हमारे वेबपेज को फिर से देखने के लिए प्रिंट पूर्वावलोकन को फिर से खोलें। यहाँ आप स्पष्ट रूप से देख सकते हैं कि हमारा वेब पेज दो पेजों में विभाजित हो गया है।
