इंसर्टरूल () हमें स्टाइलशीट में एक परिभाषित स्थिति में एक नियम जोड़ने में मदद करता है जबकि डिलीटरूल () एक विशिष्ट शैली को हटाता है।
निम्नलिखित उदाहरण 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> आउटपुट
यह निम्नलिखित परिणाम देगा -
