document.styleSheets का उपयोग इंडेक्स,
के साथ किया जाता है, लेकिन यदि मैं एक विशिष्ट सीएसएस फ़ाइल के साथ stylesheet.insertRule का उपयोग करना चाहता हूं तो क्या होगा?
दस्तावेज प्राप्त करें। स्टाइलशीट्स इंडेक्स के बजाय नाम से?
मुझे फ़ाइल का नाम पता है, जिसे किसी पृष्ठ पर इंजेक्शन दिया गया है और जेएस के माध्यम से किसी बिंदु पर।
उपयोग इस, और ध्यान रखें:
सुरक्षा कारणों से, ओपेरा और मोज़िला आप अन्य डोमेन या प्रोटोकॉल से एक स्टाइलशीट का तक पहुँचने के लिए cssRules संग्रह अनुमति नहीं दी जाएगी। यह तक पहुँचने का प्रयास एक सुरक्षा उल्लंघन त्रुटि
setStyleRule = function(selector, rule) {
var stylesheet = document.styleSheets[(document.styleSheets.length - 1)];
for(var i in document.styleSheets){
if(document.styleSheets[i].href && document.styleSheets[i].href.indexOf("myStyle.css")) {
stylesheet = document.styleSheets[i];
break;
}
}
if(stylesheet.addRule){
stylesheet.addRule(selector, rule);
} else if(stylesheet.insertRule){
stylesheet.insertRule(selector + ' { ' + rule + ' }', stylesheet.cssRules.length);
}
}
पहले नोट – cprcrack
+1 के लिए +1 वास्तव में मुझे – gumenimeda
@vsync की आवश्यकता है, आपने कहा कि सुरक्षा कारणों से इसकी अनुमति नहीं है। यह एक सुरक्षा समस्या क्यों है? वास्तव में, इसका दुरुपयोग कैसे किया जा सकता है? – Pacerier
फेंक देते हैं यह सीएसएस के पते की वजह से हुआ पेज के पते की अलग है। ठीक करने के लिए बस दोनों को कुछ पता लगाएं।
बनाम बनाम उत्तर के लिए यहां एक मामूली समायोजन है।
function addRule(stylesheetId, selector, rule) {
var stylesheet = document.getElementById(stylesheetId);
if (stylesheet) {
stylesheet = stylesheet.sheet;
if (stylesheet.addRule) {
stylesheet.addRule(selector, rule);
} else if (stylesheet.insertRule) {
stylesheet.insertRule(selector + ' { ' + rule + ' }', stylesheet.cssRules.length);
}
}
}
एक बार जब आप document.getElementById के माध्यम से डोम वस्तु मिल आप वास्तविक स्टाइल शीट का उपयोग करने की 'चादर' संपत्ति का उपयोग कर सकते हैं। तो बस यह सुनिश्चित कर लें कि आप स्टाइलशीट के लिए एक आईडी प्रदान करें जिसे आप बदलना चाहते हैं। भले ही यह एक बाहरी सीएसएस फ़ाइल है, बस इसे एक आईडी दें।
और यहाँ अपने परीक्षण पृष्ठ
<!DOCTYPE html>
<html>
<head>
<title>Untitled Page</title>
<script type="text/javascript" src="jquery-1.7.1.js"></script>
<script>
var
index = 0,
items = [
{ selector: "h1", rules: "color:#3333BB;font: bold 18px Tahoma;padding: 12px 0 0 0;" },
{ selector: "p", rules: "padding:0;margin:0;background-color:#123456;color:#ABCDEF;"},
{ selector: "b", rules: "font-weight:normal;"},
{ selector: "i", rules: "color:#66FF66;" }
];
function addRule(stylesheetId, selector, rule) {
var stylesheet = document.getElementById(stylesheetId);
if (stylesheet) {
stylesheet = stylesheet.sheet;
if (stylesheet.addRule) {
stylesheet.addRule(selector, rule);
} else if (stylesheet.insertRule) {
stylesheet.insertRule(selector + ' { ' + rule + ' }', stylesheet.cssRules.length);
}
}
}
$(document).ready(function() {
$("button").click(function() {
addRule("myStyles", items[index].selector, items[index].rules);
index++;
});
});
</script>
<style id="myStyles">
div
{
border: solid 1px black;
width: 300px;
height: 300px;
}
</style>
</head>
<body>
<button>Click Me</button>
<div>
<h1>test</h1>
<p>Paragraph One</p>
<p>Paragraph with <b>bold</b> and <i>Italics</i></p>
<p>Paragraph 3</p>
</div>
</body>
</html>
क्यों इतनी जटिल है? आप दस्तावेज़ में सभी स्टाइलशीट के माध्यम से पाशन के बिना आईडी या URL द्वारा एक विशेष दस्तावेज़ स्टाइलशीट प्राप्त कर सकते हैं: var mysheet = $('link#id')[0].sheet; ... या ... var mysheet = $('link[href="/css/style.css"]')[0].sheet;
पूरी तरह से काम करता है! लेकिन क्या आप समझा सकते हैं, आप कैसे जानते थे, कि आवश्यक संपत्ति का नाम "शीट" था? – Webars
मुझे याद नहीं है कि मैंने इसे पहले देखा था, लेकिन 'शीट' मूल रूप से स्टाइलशीट को प्रोग्रामेटिक रूप से एक्सेस करने के लिए उपयोग की जाने वाली संपत्ति है। – suncat100
दरअसल, ".शीट" पूरी तरह से काम करता है! दुर्भाग्यवश, इस महान संपत्ति के बारे में कुछ जानकारीएं हैं। ज्यादातर लोग "document.styleSheets" के माध्यम से लूप करते हैं। – Marian07
मैं इस questio पूछा है, एन लेकिन पहले से ही एक तरह से के बारे में सोचा इसे हल करने के लिए। मैं इस समाधान को स्टैक ओवरफ्लो समुदाय के साथ साझा करना चाहता था, जिसके लिए इसकी आवश्यकता हो सकती है। – vsync