CSS का उपयोग करके element.style को ओवरराइड करें

Question

मेरे पास पृष्ठ बिल्डर से एक HTML पृष्ठ है, और यह styleसीधे तत्व को विशेषता इंजेक्ट करता है। मैंने पाया कि यह माना जाता है element.style।

मैं CSS का उपयोग करके इसे ओवरराइड करना चाहता हूं। मैं तत्व का मिलान कर सकता हूं, लेकिन यह इसे ओवरराइड नहीं करता है।

मैं CSS का उपयोग करके शैली को कैसे ओवरराइड कर सकता हूं?

Comments

स्टाइल इंजेक्शन के स्रोत का पता लगाएं और इसे हटा दें? यदि यह आपके दस्तावेज़ स्रोत में नहीं है, तो यह संभवतः जावास्क्रिप्ट से कहीं आ रहा है।

— cimmanon

आप स्रोत कैसे खोज सकते हैं?

— शैलेन

कमांड + शिफ्ट + एफ (एक मैक पर) या

— सीटीएल

जेएस में एक विकल्प का उपयोग कर जोड़ा संपत्ति को हटाने के लिए हो सकता है removeProperty(), यानी document.querySelector("li").style.removeProperty("display"); तो आप भी एक नया डिफ़ॉल्ट मूल्य प्रदान करने की जरूरत नहीं है (जैसे आप के साथ क्या करना है !important, लेकिन वंशानुक्रम श्रृंखला सिर्फ "कूदता है"

— रग

Answer 1

यद्यपि यह अक्सर पर फेंक दिया जाता है, आप तकनीकी रूप से उपयोग कर सकते हैं:

display: inline !important;

यह आमतौर पर अच्छा अभ्यास नहीं है, लेकिन कुछ मामलों में आवश्यक हो सकता है। आपको क्या करना चाहिए अपने कोड को संपादित करें ताकि आप <li>तत्वों को पहली जगह में एक शैली लागू नहीं कर रहे हैं ।

Comments

तत्व.स्टाइल का मतलब है कि यह मार्कअप में है, इसलिए आपके html में, आप देखेंगे<li style="display: none;">

— डिस्कोइंफिल्टर

शो का उपयोग करते समय jQuery में () विधि, प्रदर्शन: ब्लॉक; तत्व शैलियों के लिए लागू किया जाता है। मैं चाहता था कि यह प्रदर्शित हो: इनलाइन-ब्लॉक; हालांकि। मैंने पहले इस विधि का उपयोग न करके और .cs ('डिस्प्ले', 'इनलाइन-ब्लॉक') का उपयोग करके इसे हल किया; बजाय। हालांकि, इस उदाहरण को पढ़ने के बाद मुझे लगता है कि मैं उपयोग करना बदल दूंगा!

— साइमन बेंग्सटन

jQuery उस प्रदर्शन गुण को सेट करता है जो डिफ़ॉल्ट उस तत्व के लिए है जो वह दिखा रहा है।

— लोककथा

सचमुच सिर्फ "GTF यहाँ से बाहर" कहा जब यह मेरे लिए काम किया, मेरी प्रेमिका परेशान

— जग

इनमें से अधिकांश टिप्पणियां मानती हैं कि उनके पास स्रोत कोड तक पहुंच है। यदि कोडर्स ने इनलाइन शैलियों के साथ पुस्तकालयों को बाहर नहीं रखा, तो मुझे इन बुरी प्रथाओं को करने की आवश्यकता नहीं होगी।

— TallOrderDev

Answer 2

यह सीएसएस जावास्क्रिप्ट को भी अधिलेखित करेगा:

#demofour li[style] {
    display: inline !important;
} 

या केवल पहले एक के लिए

#demofour li[style]:first-child {
    display: inline !important;
}

Answer 3

element.style मार्कअप से आता है।

<li style="display: none;">

बस styleHTML से विशेषता को हटा दें ।

Comments

Im <li style = "display: none;" को नहीं जोड़ रहा है

— DW

यह कहीं न कहीं इंजेक्शन है। मुझे इसकी भी तलाश है, मुझे लगता है कि Google मैप्स इस D:

— icedwater

अगर उसे इंजेक्शन लगाया जाता है तो वह उस तक नहीं पहुंच सकता है और इसे खुद ही हटा सकता है, उसे इसे ओवरराइड करना होगा

— jonyB

Answer 4

सीएसएस के माध्यम से element.style को बदलना महत्वपूर्ण है

color: #7D7D7D;

सेवा

color: #7D7D7D !important;

इससे हो जाना चाहिए।

Answer 5

बेशक, महत्वपूर्ण चाल यहाँ निर्णायक है, लेकिन अधिक विशेष रूप से लक्षित करने से न केवल आपके ओवरराइड को वास्तव में लागू करने में मदद मिल सकती है (वजन मानदंड महत्वपूर्ण पर शासन कर सकते हैं), बल्कि अनपेक्षित तत्वों को ओवरराइड करने से बचने के लिए भी।

अपने ब्राउज़र के डेवलपर टूल के साथ, आपत्तिजनक शैली विशेषता के सटीक मूल्य की पहचान कर सकते हैं; उदाहरण के लिए:

"font-family: arial, helvetica, sans-serif;"

या

"display: block;"

फिर, तय करें कि आप चयनकर्ताओं की किस शाखा को ओवरराइड करेंगे; आप अपनी आवश्यकताओं को पूरा करने के लिए अपनी पसंद को व्यापक या संकीर्ण कर सकते हैं, जैसे:

p span

या

section.article-into.clearfix p span

अंत में, अपने custom.css में, [विशेषता ^ = मान] चयनकर्ता और महत्वपूर्ण घोषणा का उपयोग करें:

p span[style^="font-family: arial"] {
  font-family: "Times New Roman", Times, serif !important;
}

ध्यान दें कि आपको पूरी शैली विशेषता मान को उद्धृत करने की आवश्यकता नहीं है, बस स्ट्रिंग को स्पष्ट रूप से मिलान करने के लिए पर्याप्त है।

Answer 6

मेरे ज्ञान के अनुसार, इनलाइन sytle पहले आता है इसलिए css क्लास को काम नहीं करना चाहिए।

Jquery का उपयोग करें

$(document).ready(function(){

   $("#demoFour li").css("display","inline");
  });

You can also try 

#demoFour li { display:inline !important;}

Answer 7

जावास्क्रिप्ट का उपयोग करें।

उदाहरण के लिए:

var elements = document.getElementById("demoFour").getElementsByTagName("li");
for (var i = 0; i < elements.length; i++) {
    elements[i].style.display = "inline";
}

Answer 8

आप तत्व शैली की अपमानजनक संपत्ति को संदर्भित करके अपनी सीएसएस पर शैली को ओवरराइड कर सकते हैं। मेरे मामले में ये दोनों कोड 15px के रूप में सेट हैं और मेरी पृष्ठभूमि की छवि को काला कर रहे हैं। इसलिए, मैंने उन्हें 0px के साथ ओवरराइड किया और महत्वपूर्ण रखा, इसलिए यह प्राथमिकता होगी

.content {
    border-bottom-left-radius: 0px !important;
     border-bottom-right-radius: 0px !important;
}