मैं सामग्री उत्पन्न करने के बाद शैली टैग बदलना चाहता हूं। मैं शैली टैग में शैली कैसे जोड़ सकता हूं? मैं उपयोग करने की कोशिश:जावास्क्रिप्ट का उपयोग कर शैली टैग को गतिशील रूप से कैसे बदलें?
document.getElementById('style').appendChild(styleContents);
लेकिन यह काम नहीं किया
प्रयास करें। , (जहां तक एचटीएमएल का संबंध है)
document.styleSheets[0].cssText = ""; //some css goes here
style एक संपत्ति है। getElementById() के बाद आप अपना style बदल सकते हैं।
HTML:
<div id='myDiv'>...</div>
जे एस:
var div = document.getElementById('myDiv')
div.style.background = 'red';
div.style.margin = "10px";
div.style.fontSize = "12px";
आदि
यह सही नहीं है। वह स्टाइल टैग में बदलाव करना चाहता है, और यह एक div को इनलाइन शैलियों को लागू करता है, जो अप्रासंगिक है। –
हाय स्टीव, हालांकि यह विशेषता मान असाइन करने का एक कानूनी तरीका है, यह अनुशंसा की जाती है कि आप इसे करने के लिए इनबिल्ट फ़ंक्शंस का उपयोग करें। यह विभिन्न ब्राउज़रों द्वारा एचटीएमएल और जेएस को प्रस्तुत करने के विभिन्न तरीकों के कारण है। यहां तक कि मैं पहले भी ऐसा करता था, लेकिन विशेष रूप से आईई के साथ कई मुद्दों का सामना करना पड़ा। – Yash
वे क्या अंतर्निहित कार्य हैं? – Ben
तुम क्यों jQuery पुस्तकालय का उपयोग नहीं करते और सीधे डोम तत्वों के लिए नए सीएसएस संलग्न करें?
उदाहरण के लिए:
<script>
$(document).ready(function(){
$("#an_element").css("border", "1px solid #333");
});
</script>
<div id="an_element">Test</a>
यह आईडी "an_element" के साथ अपने तत्व के चारों ओर एक सीमा जोड़ना होगा।
आप शायद शैली टैग करने के लिए सीएसएस जोड़ने की कोशिश कर रहे हैं इस
var currentElement = document.getElementById('style');
var currentStyle = currentElement.getAttribute('style');
var stylePieces = [];
if(currentStyle) {
stylePieces = currentStyle.split(';');
}
stylePieces.push('new-style: true;');
currentElement.setAttribute('style', stylePieces.join(';'));
एक style तत्व कोई तत्व बच्चों के रूप में अपनी सामग्री केवल पाठ परिभाषा से है: इस का उपयोग कर पूरा किया जा सकता है:
document.getElementsByTagName('style')[0].innerHTML=""; //some css goes here
तुम भी उपयोग कर सकते हैं। लेकिन इसका मतलब यह है कि आप innerHTML संपत्ति का उपयोग करके अपनी सामग्री में शामिल हो सकते हैं। अपने तत्व <style id=foo> है, तो आप लिखते हैं:
document.getElementById('foo').innerHTML += styleContents;
मैं एक साथ http://jsfiddle.net/fttS5/1/ पर एक त्वरित उदाहरण फेंक दिया।
आप एचडीएमएल में किसी भी अन्य तत्व की तरह स्टाइल टैग में एक आईडी संलग्न कर सकते हैं।
<style id="style"></style>
अब आप कोड आप appendChild साथ की कोशिश की लेते हैं और इसे
document.getElementById('style').appendChild(document.createTextNode(styleContents));
यह करने के लिए एक त्वरित बदलाव जोड़ने चाल करना चाहिए कर सकते हैं। शुभ लाभ।
आप मेरे नीचे दिए गए उत्तर के रूप में सूचीबद्ध आंतरिक HTML विधि का भी उपयोग कर सकते हैं।
मुझे पता है कि यह एक पुराना सवाल है, लेकिन मैं तत्व को सीधे स्टाइल लगाने के बिना इन्हें गतिशील रूप से अपडेट करने का एक तरीका जानने का प्रयास कर रहा हूं।
यदि आप शैली को एक आईडी टैग देते हैं और इसे चुनते हैं तो आप शीट संपत्ति का उपयोग करके अपने सीएसएस तक पहुंच सकते हैं।
यहां से आप जो कुछ भी चाहते हैं उसे अपडेट कर सकते हैं। पूरे सीएसएस को टैग के अंदर बदलकर या अलग-अलग वर्गों को अपडेट करके।
document.getElementById('somestyletagid').sheet.cssRules[0].selectorText
यह आपकी कक्षा चयनकर्ता है।
document.getElementById('somestyletagid').sheet.cssRules[0].style
ये कक्षा में सभी व्यक्तिगत सीएसएस गुण हैं।
आप ऐसा करके पृष्ठभूमि रंग को अद्यतन कर सकते हैं:
document.getElementById('somestyletagid').sheet.cssRules[0].style.backgroundColor = 'red'
यह आपके html में किसी भी शैली टैग पहुंचने का एक तरीका है। दुर्भाग्यवश प्रत्येक CSSStyleRule के लिए कोई सख्ती से अद्वितीय आईडी नहीं है जिसे मैं पा सकता हूं। निकटतम चयनकर्ता है लेकिन जाहिर है कि दोहराया जा सकता है। कम से कम मेरी जरूरतों के लिए यह वही तरीका है जो मुझे चाहिए।
आप दस्तावेज़.स्टाइलशीट्स का उपयोग कर किसी भी शामिल सीएसएस फ़ाइलों को भी अपडेट कर सकते हैं और उन्हें आम तौर पर उसी तरह एक्सेस कर सकते हैं।
document.styleSheets[0].href
शामिल सीएसएस फ़ाइल का href।
document.styleSheets[0].cssRules
शीट में सभी कक्षाएं।
आशा इस कोई मदद करता है!
यदि आप मौजूदा स्टाइल शीट में नियम जोड़ना चाहते हैं, तो करने का आधिकारिक तरीका insertRule विधियों के साथ है। यह ब्राउज़र पर बस इतना आसान होगा कि बस टेक्स्ट जोड़ना। अगर आप इसे नीचे की तरह करते हैं, यदि कोई विशेष सीएसएस नियम वैध वाक्यविन्यास नहीं है, तो यह आपके दस्तावेज़ की अखंडता की रक्षा करेगा, इस प्रकार इसे छोड़ देगा।
स्ट्रिंग टाइमिंग के लिए बस jQuery का उपयोग करता है, शायद वैसे भी इसकी आवश्यकता नहीं है।
आपको इसे स्टाइल टैग की आईडी देना होगा।
function AddMoreStyles(code, styleTagId) {
var sheet = document.getElementById('#' + styleTagId);
let lines = code.replace(/[\r\n\t]/gm, ' ').split(/}/);
if (!sheet) {
return;
}
sheet = sheet.styleSheet || sheet.sheet || sheet;
lines.forEach(function (str) {
str = $.trim(str) + '}';
let m = str.match(/(.+?)\{(.*?)}/), m1, m2;
if (m) {
m1 = $.trim(m[1]);
m2 = $.trim(m[2]);
try {
if (sheet.insertRule) sheet.insertRule(m1 + '{' + m2 + '}', sheet.cssRules.length);
else sheet.addRule(m1, m2);
} catch (e) {
console.log("!ERROR in css rule: " + e.message);
}
}
});
};
@AtheistP3ace के जवाब पर जोड़ा जा रहा है, यहाँ एक समारोह शुद्ध जावास्क्रिप्ट का उपयोग करता है एक शैली ब्लॉक की सामग्री को बदलने के लिए है:
// Change the CSS in the style section.
// Property is the name of the class or id E.G. ".mdc-card" or "#main".
// Style is the name of the CSS style. E.G. "Background".
// Value is the setting that the style will use, E.G. "Red"
// WARNING: STOPS AND EXECUTES ON THE FIRST MATCH DOES NOT PROCESS MORE AFTER THAT!!!
function changeCSS(property, style, value, cssSectionID) {
if (cssSectionID === undefined) {
cssSectionID = "mainCSS";
}
// Get the current CSS sheet.
var mainCSS = document.getElementById("mainCSS");
var changeStatus = false;
// Refine the stylesheet into a more easily processed form.
// It is done here as making it part of the variable definition produces issues where you still need to call the sheet property.
mainCSS = mainCSS.sheet;
// Only execute if the user has specified values for each of the required parameters.
if (property !== undefined && style !== undefined && value !== undefined) {
// Loop through all of the CSS Properties until the specified property is found.
for (var index = 0; index < mainCSS.cssRules.length; index++) {
// Only apply the value of the property matches.
if (mainCSS.cssRules[index].selectorText === property.toString()) {
// Apply the specified property value to the.
mainCSS.cssRules[index].style[style.toString()] = value.toString();
// Sets the exit status and breaks the loop's execution.
changeStatus = true;
break;
}
}
}
// Returns the result of the operation. True being successful and false being unsuccessful.
return changeStatus;
}
शैली टैग तत्व होते हैं माना जाता नहीं है –
क्या हैं आप करने की कोशिश कर रहे हैं? एक तत्व के सीएसएस स्टाइल बदलें? – danwellman
संभावित डुप्लिकेट: http://stackoverflow.com/questions/524696/how-to-create-a-style-tag-with-javascript –