Вопрос по javascript, dom, html – удаление стилей элементов HTML через JavaScript

74

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

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

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


    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");
}
^ Это неправильный ответ, хотя. Evan Hendler
Пробовал удалить атрибут ("стиль"), все равно не повезло. Я использую setInterval для циклического переключения между цветами фона, чтобы (попытаться) создать эффект импульса. Я попытаюсь написать несколько других классов стилей, чтобы попытаться ответить на 4. Какие еще идеи? Мой текущий код опубликован ниже ... danwoods
было бы здорово, если бы вы принялиthis как правильный ответ на этот вопрос caramba

Ваш Ответ

5   ответов
57

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

В jQuery:

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

$("#id").removeClass("classname");
@ Джейсон, я согласен.
Эти два фрагмента кода делают совершенно разные вещи. Только первый имеет какое-либо отношение к вопросу.
3

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

Для родного JavaScript

151

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

element.removeAttribute("style")
@mrec не совсем то же самое, в вашем случае элемент все еще имеет пустойstyle атрибут
Это отвечает на вопрос OP - удалите все встроенные стили и отступите к правилам таблиц стилей, но ... это также уничтожит все встроенные стили. Если вы хотите выборочно удалять правила из встроенных стилей, ответ @ sergio ниже (на самом деле, комментарий davidjb на этот ответ) более полезен.
все еще полезно, спустя годы ....
элегантный до макс
Или жеelement.style.cssText = null, который делает то же самое.
4

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

<tr class="row-even highlight">

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

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

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

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

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

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

Похожие вопросы