Computer >> कंप्यूटर >  >> प्रोग्रामिंग >> HTML

एचटीएमएल डोम स्टाइल पेजब्रेकइनसाइड प्रॉपर्टी

<घंटा/>

एचटीएमएल डोम स्टाइल पेजब्रेकइनसाइड प्रॉपर्टी एचटीएमएल दस्तावेज़ में एचटीएमएल तत्व के अंदर प्रिंटिंग या प्रिंट पूर्वावलोकन के लिए पेज-ब्रेक व्यवहार को वापस लौटाती है और संशोधित करती है।

सिंटैक्स

निम्नलिखित वाक्य रचना है -

1. रिटर्निंग पेजब्रेकइनसाइड

object.pageBreakInside

2. पृष्ठ को संशोधित करनाBreakInside

object.pageBreakInside = “value”

यहाँ, मान हो सकता है -

मान स्पष्टीकरण
प्रारंभिक यह इस गुण मान को उसके डिफ़ॉल्ट मान पर सेट करता है।
उत्तराधिकारी यह इस गुण मान को इसके मूल तत्व से प्राप्त करता है।
स्वतः यदि आवश्यक हो तो यह HTML दस्तावेज़ में तत्व के अंदर एक पृष्ठ विराम सम्मिलित करता है।
से बचें यह HTML दस्तावेज़ में तत्व के अंदर एक पृष्ठ विराम से बचाता है

आइए एचटीएमएल डोम स्टाइल पेज ब्रेकइनसाइड प्रॉपर्टी का एक उदाहरण देखें -

उदाहरण

<!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 pageBreakInside 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">Set 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.pageBreakInside = "avoid";
   }
</script>
</body>
</html>

आउटपुट

एचटीएमएल डोम स्टाइल पेजब्रेकइनसाइड प्रॉपर्टी

अब प्रिंट पूर्वावलोकन खोलें और देखें कि हमारा html पृष्ठ कैसे प्रदर्शित होगा। और फिर दस्तावेज़ में पृष्ठ-विराम व्यवहार से बचने के लिए लाल बटन पर क्लिक करें -

एचटीएमएल डोम स्टाइल पेजब्रेकइनसाइड प्रॉपर्टी


  1. HTML DOM स्टाइल पोजीशन प्रॉपर्टी

    HTML DOM स्टाइल पोजीशन प्रॉपर्टी एक HTML दस्तावेज़ में HTML तत्व द्वारा उपयोग की जाने वाली पोजिशनिंग विधि को लौटाती है और संशोधित करती है। सिंटैक्स निम्नलिखित वाक्य रचना है - 1. वापसी की स्थिति object.position 2. स्थिति को संशोधित करना object.position = “value” यहाँ, मान हो सकता है -

  1. एचटीएमएल डोम स्टाइल पेजब्रेकप्रॉपर्टी से पहले

    एचटीएमएल डोम स्टाइल पेजब्रेक संपत्ति के लौटने से पहले और एचटीएमएल दस्तावेज़ में एचटीएमएल तत्व से पहले पूर्वावलोकन या प्रिंट पूर्वावलोकन के लिए पेज-ब्रेक व्यवहार को संशोधित करता है। सिंटैक्स निम्नलिखित वाक्य रचना है - 1. रिटर्निंग पेजBreakBefore object.pageBreakBefore 2. पृष्ठ को संशोधित करनाBreak

  1. HTML DOM स्टाइल डिस्प्ले प्रॉपर्टी

    HTML DOM स्टाइल डिस्प्ले प्रॉपर्टी का उपयोग किसी तत्व के प्रदर्शन प्रकार को सेट करने या वापस करने के लिए किया जाता है। तत्व ज्यादातर ब्लॉक या इनलाइन होते हैं। आप डिस्प्ले का उपयोग करके तत्व को छिपा भी सकते हैं:कोई नहीं। − . के लिए वाक्य रचना निम्नलिखित है प्रदर्शन गुण सेट करना - object.style.displ