জাভাস্ক্রিপ্ট মাধ্যমে এইচটিএমএল উপাদান শৈলী অপসারণ


91

আমি একটি উপাদান এর ইনলাইন স্টাইল ট্যাগ মান প্রতিস্থাপন করার চেষ্টা করছি। বর্তমান উপাদানটি এর মতো দেখাচ্ছে:

`<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">`

এবং আমি সেই সমস্ত স্টাইলের জিনিসগুলি মুছে ফেলতে চাই যাতে এটি কোনও ইনলাইন শৈলীর চেয়ে শ্রেণীর দ্বারা স্টাইল করা হয়। আমি এলিমেন্ট.স্টাইল মোছার চেষ্টা করেছি; এবং উপাদান.style = নাল; এবং উপাদান.style = ""; কোন লাভ হয়নি। আমার বর্তমান কোড এই বিবৃতিতে বিরতি। পুরো ফাংশনটি দেখে মনে হচ্ছে:
ফাংশন আনসেটহাইটলাইট (সূচক) {

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");
}

ক্লিয়ারইন্টারওয়াল কাজ করে তবে সতর্কতা কখনই জ্বালায় না এবং পটভূমি একই থাকে। কেউ কি কোন সমস্যা দেখছেন? আগাম ধন্যবাদ...


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");
}

অ্যাট্রিবিউট ("স্টাইল") সরানোর চেষ্টা করা হয়েছে, এখনও ভাগ্য নেই। আমি একটি পালস এফেক্ট তৈরি করতে ব্যাকগ্রাউন্ড কালারের মাধ্যমে চক্রের জন্য সেটআইন্টারওয়াল ব্যবহার করছি। আমি উত্তর 4 চেষ্টা করার জন্য আরও কিছু স্টাইলের ক্লাস লেখার চেষ্টা করব? অন্য কোনও ধারণা? আমার বর্তমান কোডটি নীচে পোস্ট করা হয়েছে ...
ড্যানউডস

এটা অসাধারণ হবে যদি আপনি মেনে নেবেন এই এই প্রশ্নের সঠিক উত্তর হিসাবে
caramba

^ যদিও এটি সঠিক উত্তর নয়।
ইভান হ্যান্ডলার

উত্তর:


183

আপনি ঠিক করতে পারেন:

element.removeAttribute("style")

51
বা element.style.cssText = null, যা অনেক একই কাজ করে।
মেরেক

4
@ মিরিচ হুবহু এক নয়, আপনার ক্ষেত্রে কোনও উপাদানটির এখনও শূন্য styleবৈশিষ্ট্য রয়েছে
ব্যবহারকারী

4
এটি ওপি-র প্রশ্নের উত্তর দেয় - সমস্ত ইনলাইন শৈলী এবং স্টাইলশিট বিধিগুলিতে ফ্যালব্যাক সরান, কিন্তু ... এটি সমস্ত ইনলাইন শৈলীও দূরে সরিয়ে দেয়। আপনি যদি ইনলাইন শৈলীগুলি থেকে বাছাই করে নিয়মগুলি মুছতে চান তবে নীচে @ সার্জিওর উত্তর (আসলে, উত্তরটিতে ডেভিডজবির মন্তব্য) বেশি কার্যকর।
এরিকোসো

72

জাভাস্ক্রিপ্টে:

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

JQuery এ:

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

15
কোডের প্রথম লাইনটি হয় ইন্টারনেট এক্সপ্লোরারে (<9) এর সাথে ত্রুটি হিসাবে উপস্থিত হয়েছিল Invalid argumentবা আইই> = 9 তে উপাদানটি পুরোপুরি অদৃশ্য হয়ে যায় getElementById("id").style.display = '', সেট করা , খালি স্ট্রিং হওয়ায় ব্রাউজারগুলি জুড়ে কাজ করতে দেখা যায়।
ডেভিডজবি

4
jQuery এ কোনও শৈলী অপসারণের সঠিক $("#id").css('display', '');
উপায়টি

এটি আমাকে কাছে পেয়েছিল, তবে এটি শূন্য ছিল না, তবে 'কিছুই নয়' যা কাজ করেছিল, যেমন$("#id").css('display','none');
হারুন

4
প্রদর্শন: এই প্রশ্ন বা উত্তরটির সাথে কারও কিছুই করার নেই। এটি উপাদান লুকানোর জন্য
জেসনউফ

4
এছাড়াও রয়েছে CSSStyleDeclaration.removeProperty()যা এই প্রোগ্রামটিতে একটি নাল নিয়োগ তুলনায় অনেক ক্লিনার। বিকাশকারী.মোজিলা.অর্গ.ইন-
ইউএস

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

আপনি যদি jQuery ব্যবহার করে থাকেন

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

4
এই দুটি কোড স্নিপেটগুলি বন্যভাবে বিভিন্ন কাজ করে। প্রশ্নটির সাথে কেবল প্রথমটির কোনও সম্পর্ক রয়েছে।
জেসনউফ

5

শ্রেণীর বৈশিষ্ট্যে একাধিক শৈলী থাকতে পারে, তাই আপনি এটি হিসাবে নির্দিষ্ট করতে পারেন

<tr class="row-even highlight">

এবং উপাদান.className থেকে 'হাইলাইট' অপসারণ করতে স্ট্রিং ম্যানিপুলেশন করুন

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

JQuery ব্যবহার করা আপনার পদ্ধতিগুলি যেমন এটি সহজ করে তুলবে

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

এটি আপনাকে সহজে হাইলাইট করতে টগল করতে সক্ষম করবে


আপনার স্টাইল শীটটিতে উচ্চ বর্ণের সংজ্ঞা দেওয়ার আরেকটি সুবিধা হ'ল সিএসএসের কেবল একটি লাইন পরিবর্তন করে এবং জাভাস্ক্রিপ্টে কোনও পরিবর্তন না করেই কীভাবে "হাইলাইট" প্রদর্শিত হয় তা আপনি ঠিক পরিবর্তন করতে পারেন। আপনি যদি জিকিউরি ব্যবহার না করে থাকেন তবে কোনও শ্রেণি যুক্ত করা এবং অপসারণ করা এখনও বেশ সহজ: / * অন * / theElement.className + = 'হাইলাইট'; / * বন্ধ * / theElement.className = theElement.className.replace (/ \ b \ s * হাইলাইট \ বি /, ''); (সিএসএসে। এলিমেন্টটি সংজ্ঞায়িত করে, এটি স্বয়ংক্রিয়ভাবে সর্বত্রও একই থাকে ))
চক কলার্স

ওহো, ভুলে যাওয়া সম্ভাবনার ক্লাস একাধিকবার নির্দিষ্ট করা হয়েছে। সেই কেসটি হ্যান্ডেল করতে, নিয়মিত অভিব্যক্তিতে 'g' পতাকা যুক্ত করুন: theElume.className = theElement.className.replace (/ \ / b \ s * হাইলাইট \ বি / জি, '');
চক কলার্স

ClassName এর পরিবর্তে শ্রেণিবদ্ধ নোড সম্পত্তিটি ব্যবহার করুন
শিশির অরোরা



1

সম্পূর্ণ শৈলী অপসারণ, শুধুমাত্র NULL সেট করা হয় না

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

0

অপসারণ প্রসারণ সরান

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>

আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.