insertRule() আমাদেরকে স্টাইলশীটে একটি নির্দিষ্ট অবস্থানে একটি নিয়ম যোগ করতে সাহায্য করে যখন deleteRule() একটি নির্দিষ্ট স্টাইল মুছে দেয়।
নিম্নলিখিত উদাহরণগুলি CSS নিয়মগুলিকে চিত্রিত করে যা জাভাস্ক্রিপ্ট ব্যবহার করে একটি স্টাইলশীটে যোগ করা যেতে পারে।
উদাহরণ
<!DOCTYPE html>
<html>
<head>
<style type="text/css" id="custom">
body {
background-color: silver;
}
</style>
</head>
<body>
<h1>Custom CSS!</h1>
<p>Woohoo!</p>
<script>
let newSheet = document.getElementById('custom').sheet
let cs = 'p {';
cs += 'margin: 4%;';
cs += 'padding: 2%;';
cs += 'font-size: 22px;';
cs += 'box-shadow: -10px 4px 0 chartreuse;'
cs += '}';
newSheet.insertRule(cs, 0);
</script>
</body>
</html> আউটপুট
এটি নিম্নলিখিত ফলাফল তৈরি করবে -
উদাহরণ
<!DOCTYPE html>
<html>
<head>
<style type="text/css" id="demo">
div {
margin: 3%;
text-align: center;
background-color: powderblue;
}
p {
box-shadow: 0 0 12px rgba(0,0,0,0.6);
}
h2 {
color: red;
}
</style>
</head>
<body>
<div>
<h2>Custom CSS!</h2>
<p>Woohoo!</p>
</div>
<script>
let mySheet = document.getElementById('demo').sheet
let cs = 'h2 { border: 2px solid green; }'
mySheet.deleteRule(2);
mySheet.insertRule(cs, 0);
</script>
</body>
</html> আউটপুট
এটি নিম্নলিখিত ফলাফল তৈরি করবে -
