जावास्क्रिप्ट के माध्यम से HTML तत्व शैलियों को हटाना

Question

मैं एक तत्व की इनलाइन शैली टैग मूल्य को बदलने की कोशिश कर रहा हूं। वर्तमान तत्व इस तरह दिखता है:

`<tr class="row-even" style="background: red none repeat scroll 0% 0%; position: relative; -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial;" id="0000ph2009-06-10s1s02">`

और मैं उस सभी स्टाइल सामान को निकालना चाहता हूं ताकि यह इनलाइन स्टाइल के बजाय इसे क्लास द्वारा स्टाइल किया जाए। मैंने एलिमेंट हटाने की कोशिश की है। स्टाईल; और तत्व.स्टाइल = अशक्त; और तत्व.स्टाइल = ""; कोई फायदा नहीं। मेरा वर्तमान कोड इन विवरणों को तोड़ता है। संपूर्ण फ़ंक्शन ऐसा दिखता है:
फ़ंक्शन अनसिथेटलाइट (इंडेक्स) {

if(index < 10)
index = "000" + (index);
else if (index < 100)
  index = "000" + (index);
  else if(index < 1000)
    index = "0" + (index);
    if(index >= 1000)
      index = index;

var mainElm = document.getElementById('active_playlist');
var elmIndex = "";

for(var currElm = mainElm.firstChild; currElm !== null; currElm = currElm.nextSibling){
  if(currElm.nodeType === 1){

  var elementId = currElm.getAttribute("id");

  if(elementId.match(/\b\d{4}/)){

    elmIndex = elementId.substr(0,4);


    if(elmIndex == index){
      var that = currElm;
      //that.style.background = position: relative;
      }
    }
  }
}

clearInterval(highlight);
alert("cleared Interval");
that.style.background = null;

alert("unSet highlight called");
}

ClearInterval काम करता है, लेकिन चेतावनी कभी भी फायर नहीं करती है और पृष्ठभूमि समान रहती है। किसी को कोई समस्या देखते हैं? अग्रिम में धन्यवाद...

---

function unSetHighlight(index){  
  alert(index);  
  if(index < 10)  
    index = "000" + (index);  
    else if (index < 100)  
      index = "000" + (index);  
      else if(index < 1000)  
        index = "0" + (index);  
        if(index >= 1000)  
          index = index;  

    var mainElm = document.getElementById('active_playlist');
    var elmIndex = "";

    for(var currElm = mainElm.firstChild; currElm !== null; currElm = currElm.nextSibling){
      if(currElm.nodeType === 1){

      var elementId = currElm.getAttribute("id");

      if(elementId.match(/\b\d{4}/)){

        elmIndex = elementId.substr(0,4);
        alert("elmIndex = " + elmIndex + "index = " + index);


        if(elmIndex === index){
          var that = currElm;
          alert("match found");
          }
        }
      }
    }

    clearInterval(highlight);
    alert("cleared Interval");
    that.removeAttribute("style");

    //that.style.position = "relative";
    //reColor();
    alert("unSet highlight called");
}

Comments

हटाने की कोशिश की जाती है ("शैली"), फिर भी कोई भाग्य नहीं। मैं पृष्ठभूमि रंगों के माध्यम से साइकिल चलाने के लिए setInterval का उपयोग कर रहा हूं (एक पल्स इफ़ेक्ट बनाने की कोशिश करता हूं)। मैं उत्तर देने के लिए कुछ अन्य शैली की कक्षाएं लिखने की कोशिश करूँगा। 4. कोई अन्य विचार? मेरा वर्तमान कोड नीचे पोस्ट किया गया है ...

— danwoods

यह भयानक हो सकता है अगर आप स्वीकार करेंगे यह इस सवाल का सही जवाब के रूप में

— Caramba

^ यह सही जवाब नहीं है, हालांकि।

— इवान हेंडलर

Answer 1

आप बस कर सकते हैं:

element.removeAttribute("style")

Comments

या element.style.cssText = null, जो बहुत कुछ करता है।

— mrec

@mrec बिल्कुल समान नहीं है, आपके मामले में एक तत्व में अभी भी खाली styleविशेषता है

— उपयोगकर्ता

यह ओपी के प्रश्न का उत्तर देता है - सभी इनलाइन शैली को हटा दें और स्टाइलशीट के नियमों को कम करें, लेकिन ... यह सभी इनलाइन शैलियों को भी उड़ा देता है। यदि आप चुनिंदा नियमों को इनलाइन शैलियों से हटाना चाहते हैं, तो @ सर्जियो का जवाब नीचे (वास्तव में, उस जवाब पर davidjb की टिप्पणी) अधिक उपयोगी है।

— एरिकोस्को

Answer 2

जावास्क्रिप्ट में:

document.getElementById("id").style.display = null;

JQuery में:

$("#id").css('display',null);

Comments

कोड की पहली पंक्ति या तो इंटरनेट एक्सप्लोरर (<9) में त्रुटि के साथ प्रकट होती है या Invalid argumentतत्व को IE> = 9. में पूरी तरह से गायब होने का कारण बनती है getElementById("id").style.display = ''। खाली स्ट्रिंग होने के नाते, सेटिंग ब्राउज़र में काम करती दिखाई देती है।

— davidjb

jQuery में स्टाइल हटाने का सही तरीका है$("#id").css('display', '');

— Oiva Eskola

यह मुझे करीब मिला, लेकिन यह अशक्त नहीं था, लेकिन 'कोई नहीं' जो काम करता था, जैसे$("#id").css('display','none');

— हारून

प्रदर्शन: कोई भी इस सवाल या जवाब के साथ कुछ नहीं करना है। वह तत्वों को छिपाने के लिए है।

— जेसनवॉफ

वहाँ भी है CSSStyleDeclaration.removeProperty()जो imho एक अशक्त काम से बहुत क्लीनर है। देखें developer.mozilla.org/en-US/docs/Web/API/CSSStyleDeclaration/...

— Sjeiti

Answer 3

getElementById("id").removeAttribute("style");

यदि आप jQuery का उपयोग कर रहे हैं तो

$("#id").removeClass("classname");

Comments

वे दो कोड स्निपेट बेतहाशा अलग-अलग काम करते हैं। केवल पहले प्रश्न के साथ कुछ भी करना है।

— जेसनवोफ

Answer 4

वर्ग विशेषता में कई शैलियाँ हो सकती हैं, इसलिए आप इसे इस रूप में निर्दिष्ट कर सकते हैं

<tr class="row-even highlight">

और element.className से 'हाइलाइट' हटाने के लिए स्ट्रिंग हेरफेर करें

element.className=element.className.replace('hightlight','');

---

JQuery का उपयोग करना आसान बना देगा क्योंकि आपके पास तरीके हैं

$("#id").addClass("highlight");
$("#id").removeClass("hightlight");

इससे आप आसानी से हाइलाइटिंग टॉगल कर पाएंगे

Comments

अपनी शैली पत्रक में .highlight को परिभाषित करने का एक और फायदा यह है कि आप सीएसएस की सिर्फ एक पंक्ति को बदलकर और किसी भी जावास्क्रिप्ट परिवर्तन को बिल्कुल नहीं करके "हाइलाइट" को ठीक से कैसे बदल सकते हैं। यदि आप JQuery का उपयोग नहीं कर रहे हैं , तो एक वर्ग जोड़ना और हटाना अभी भी बहुत सरल है: / * पर * / -Element.className + = 'हाइलाइट'; / * बंद * / -Element.className = theElement.className.replace (/ \ b \ s * highlight \ b /, ''); (सीएसएस में संशोधन को परिभाषित करके, यह स्वचालित रूप से हर जगह एक ही रहता है, भी।)

— चक कोलार

उफ़, भूल गया संभावना वर्ग एक से अधिक बार निर्दिष्ट किया गया है। उस मामले को भी संभालने के लिए, 'g' ध्वज को नियमित अभिव्यक्ति में जोड़ें: Thelementment_className = theElement.className.replace (/ \ / b \ s * highlight \ b / g, '');

— चक कोलार

ClassName के बजाय classlist नोड संपत्ति का उपयोग करें

— शिशिर अरोरा

Answer 5

उपयोग

particular_node.classList.remove("<name-of-class>")

देशी जावास्क्रिप्ट के लिए

Answer 6

JQuery में, आप उपयोग कर सकते हैं

$(".className").attr("style","");

Answer 7

पूरी तरह से हटाने वाली शैली, न केवल NULL के लिए सेट की गई

document.getElementById("id").removeAttribute("style")

Answer 8

निष्कासन निकालें

var el=document.getElementById("id");


el.style.removeProperty('display')

console.log("display removed"+el.style["display"])

console.log("color "+el.style["color"])

<div id="id" style="display:block;color:red">s</div>