удаление стилей элементов HTML через JavaScript

Я пытаюсь заменить значение тега встроенного стиля элемента. Текущий элемент выглядит так:

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

и я хотел бы удалить все эти элементы стиля, чтобы он был стилизован его классом, а не встроенным стилем. Я пытался удалить element.style; и element.style = null; и element.style = & quot ;; но безрезультатно. Мой текущий код ломается в этом заявлении. Вся функция выглядит так:
    function unSetHighlight (index) {

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

clearInterval работает, но предупреждение никогда не срабатывает, а фон остается прежним. Кто-нибудь видит какие-либо проблемы? Заранее спасибо...

<code>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");
}
</code>
 Evan Hendler23 июн. 2017 г., 12:13
^ Это неправильный ответ, хотя.
 danwoods24 июн. 2009 г., 22:53
Пробовал удалить атрибут ("стиль"), все равно не повезло. Я использую setInterval для циклического переключения между цветами фона, чтобы (попытаться) создать эффект импульса. Я попытаюсь написать несколько других классов стилей, чтобы попытаться ответить на 4. Какие еще идеи? Мой текущий код опубликован ниже ...
 caramba13 февр. 2017 г., 13:01
было бы здорово, если бы вы принялиthis как правильный ответ на этот вопрос

Ответы на вопрос(5)

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

Для родного JavaScript

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

В jQuery:

$("#id").css('display',null);
 29 окт. 2015 г., 08:48
в JQuery правильный способ удалить стиль$("#id").css('display', '');
 19 мая 2015 г., 03:50
В первой строке кода появляется сообщение об ошибке в Internet Explorer (& lt; 9) сInvalid argument или вызвать полное исчезновение элемента в IE & gt; = 9. НастройкаgetElementById("id").style.display = '', будучи пустой строкой, похоже, работает в разных браузерах.
 05 авг. 2017 г., 20:24
дисплей: никто не имеет ничего общего с этим вопросом или ответом. Это для сокрытия элементов.
 02 янв. 2017 г., 09:00
Это сблизило меня, но это было не ноль, но ни один. это сработало, например$("#id").css('display','none');
getElementById("id").removeAttribute("style");

$("#id").removeClass("classname");
 05 февр. 2018 г., 14:32
@ Джейсон, я согласен.
 05 авг. 2017 г., 20:25
Эти два фрагмента кода делают совершенно разные вещи. Только первый имеет какое-либо отношение к вопросу.
Решение Вопроса

Вы можете просто сделать:

element.removeAttribute("style")
 11 сент. 2013 г., 18:32
элегантный до макс
 12 нояб. 2015 г., 18:17
Это отвечает на вопрос OP - удалите все встроенные стили и отступите к правилам таблиц стилей, но ... это также уничтожит все встроенные стили. Если вы хотите выборочно удалять правила из встроенных стилей, ответ @ sergio ниже (на самом деле, комментарий davidjb на этот ответ) более полезен.
 12 сент. 2017 г., 21:41
все еще полезно, спустя годы ....
 19 мар. 2014 г., 20:17
Или жеelement.style.cssText = null, который делает то же самое.
 01 дек. 2014 г., 23:03
@mrec не совсем то же самое, в вашем случае элемент все еще имеет пустойstyle атрибут

поэтому вы можете указать его как

<tr class="row-even highlight">

и выполняйте манипуляции со строками, чтобы удалить «выделение»; из element.className

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

Использование jQuery сделает это проще, так как у вас есть методы

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

это позволит вам легко переключать подсветку

 19 мая 2014 г., 19:22
К сожалению, класс забытых возможностей указан несколько раз. Чтобы справиться и с этим случаем, добавьте «g» пометить регулярное выражение: theElement.className = theElement.className.replace (/ \ / b \ s * highlight \ b / g, "");
 20 апр. 2016 г., 01:26
использовать свойство узла classlist вместо className
 19 мая 2014 г., 19:11
Еще одно преимущество определения .highlight в вашей таблице стилей заключается в том, что вы можете точно изменить способ "выделения". отображается только путем изменения одной строки CSS и без каких-либо изменений Javascript. Если выnot используя JQuery, добавить и удалить класс по-прежнему довольно просто: / * on * / theElement.className + = & apos; выделить & APOS ;; / * off * / theElement.className = theElement.className.replace (/ \ b \ s * highlight \ b /, "); (Определяя .element в CSS, он автоматически остаетсяsame везде тоже.)
 20 апр. 2016 г., 20:08
classList требуется IE 10+ (caniuse.com/#feat=classlist)

Ваш ответ на вопрос