HTML DOM শৈলী পেজব্রেক আগে প্রপার্টি রিটার্ন করে এবং এইচটিএমএল ডকুমেন্টে HTML উপাদানের আগে প্রিন্ট বা প্রিন্ট প্রিভিউ করার জন্য পেজ-ব্রেক আচরণ পরিবর্তন করে।
সিনট্যাক্স
নিম্নলিখিত সিনট্যাক্স −
1. পৃষ্ঠাব্রেক পূর্বে ফিরে আসা
object.pageBreakBefore
2. পৃষ্ঠাব্রেক আগে পরিবর্তন করা হচ্ছে
object.pageBreakBefore = “value”
এখানে, মান হতে পারে −
| মান | ব্যাখ্যা |
|---|---|
| প্রাথমিক | এটি এই সম্পত্তির মানটিকে তার ডিফল্ট মান সেট করে। |
| উত্তরাধিকার | এটি তার মূল উপাদান থেকে এই সম্পত্তির মান উত্তরাধিকার সূত্রে পায় |
| অটো | প্রয়োজনে এটি একটি HTML নথিতে উপাদানের আগে একটি পৃষ্ঠা বিরতি সন্নিবেশ করায়। |
| সর্বদা | এটি সর্বদা একটি HTML নথিতে উপাদানের আগে একটি পৃষ্ঠা বিরতি সন্নিবেশ করায়৷ | ৷
| এড়িয়ে চলুন | এটি একটি HTML নথিতে উপাদানের আগে একটি পৃষ্ঠা বিরতি এড়ায়৷ | ৷
| বাম | এতে পরবর্তী পৃষ্ঠাটিকে একটি বাম পৃষ্ঠা হিসাবে বিবেচনা করা যেতে পারে যখন উপাদানের আগে এক বা দুটি পৃষ্ঠা বিরতি ঢোকানো হয় |
| ডান | এতে পরবর্তী পৃষ্ঠাটিকে একটি সঠিক পৃষ্ঠা হিসাবে বিবেচনা করা যেতে পারে যখন উপাদানটির আগে এক বা দুটি পৃষ্ঠা বিরতি ঢোকানো হয়। |
| খালি স্ট্রিং(“”) | এটি একটি HTML নথিতে উপাদানের আগে একটি পৃষ্ঠা বিরতি সন্নিবেশিত করে না। |
আসুন আমরা HTML DOM Style pageBreakBefore Property -
-এর একটি উদাহরণ দেখিউদাহরণ
<!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 পৃষ্ঠা প্রদর্শিত হবে।
এখন “লাল-এ ক্লিক করুন ” বোতামটি ওয়েব পৃষ্ঠায় উপলব্ধ এবং তারপর আবার আমাদের ওয়েবপৃষ্ঠাটি আবার পর্যবেক্ষণ করতে প্রিন্ট প্রিভিউ খুলুন। এখানে আপনি স্পষ্ট দেখতে পাচ্ছেন যে আমাদের ওয়েব পৃষ্ঠা দুটি পৃষ্ঠায় বিভক্ত হয়ে গেছে৷
৷
