menghapus gaya elemen html melalui javascript

91

Saya mencoba untuk mengganti nilai tag gaya sebaris elemen. Elemen saat ini terlihat seperti ini:

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

dan saya ingin menghapus semua gaya itu sehingga ditata menurut kelasnya daripada gaya sebaris. Saya sudah mencoba menghapus element.style; dan element.style = null; dan element.style = ""; tidak berhasil. Kode saya saat ini melanggar pernyataan ini. Seluruh fungsi terlihat seperti:
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 berfungsi tetapi peringatan tidak pernah aktif dan latar belakang tetap sama. Ada yang melihat ada masalah? Terima kasih sebelumnya...

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

— danwoods
sumber

Mencoba removeAttribute ("style"), masih tidak berhasil. Saya menggunakan setInterval untuk menggilir warna latar belakang untuk (mencoba) membuat efek pulsa. Saya akan mencoba menulis beberapa kelas gaya lain untuk mencoba menjawab 4. Ada ide lain? Kode saya saat ini diposting di bawah ini ...

— danwoods

akan luar biasa jika Anda menerima ini sebagai jawaban yang benar untuk pertanyaan ini

— caramba

^ Itu bukan jawaban yang benar.

— Evan Hendler

183

Anda bisa melakukan:

element.removeAttribute("style")

— cloudhead
sumber

51

Atau element.style.cssText = null, yang melakukan hal yang sama.

— mrec

4

@mrec tidak persis sama, dalam kasus Anda sebuah elemen masih memiliki styleatribut kosong

— pengguna

5

Ini menjawab pertanyaan OP - hapus semua gaya inline dan fallback ke aturan stylesheet, tapi ... ini juga menghilangkan semua gaya sebaris. Jika Anda ingin menghapus aturan secara selektif dari gaya sebaris, jawaban @ sergio di bawah ini (sebenarnya, komentar davidjb atas jawaban itu) lebih berguna.

— ericsoco

72

Dalam JavaScript:

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

Di jQuery:

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

— Sergio
sumber

15

Baris pertama kode muncul untuk kesalahan di Internet Explorer (<9) dengan Invalid argumentatau menyebabkan elemen menghilang seluruhnya di IE> = 9. Pengaturan getElementById("id").style.display = '', sebagai string kosong, tampaknya berfungsi di seluruh browser.

— davidjb

2

di jQuery cara yang benar untuk menghapus gaya adalah$("#id").css('display', '');

— Oiva Eskola

Ini membuat saya dekat, tetapi itu bukan nol, tetapi 'tidak ada' yang berhasil, misalnya$("#id").css('display','none');

— Aaron

2

display: tidak ada yang tidak ada hubungannya dengan pertanyaan atau jawaban ini. Itu untuk menyembunyikan elemen.

— JasonWoof

1

Ada juga CSSStyleDeclaration.removeProperty()yang imho jauh lebih bersih daripada tugas nol. Lihat developer.mozilla.org/en-US/docs/Web/API/CSSStyleDeclaration/…

— Sjeiti

12

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

jika Anda menggunakan jQuery

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

— Rony
sumber

4

Kedua potongan kode tersebut melakukan hal yang sangat berbeda. Hanya yang pertama yang ada hubungannya dengan pertanyaan itu.

— JasonWoof

5

Atribut class dapat berisi beberapa gaya, jadi Anda dapat menentukannya sebagai

<tr class="row-even highlight">

dan lakukan manipulasi string untuk menghapus 'highlight' dari element.className

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

Menggunakan jQuery akan membuat ini lebih sederhana karena Anda memiliki metodenya

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

yang akan memungkinkan Anda untuk beralih penyorotan dengan mudah

— gapple
sumber

Keuntungan lain dari mendefinisikan .highlight dalam style sheet Anda adalah Anda dapat mengubah dengan tepat bagaimana sebuah "highlight" ditampilkan hanya dengan mengubah satu baris CSS dan tidak membuat perubahan Javascript sama sekali. Jika Anda tidak menggunakan JQuery, menambahkan dan menghapus kelas masih cukup sederhana: / * on * / theElement.className + = 'highlight'; / * off * / theElement.className = theElement.className.replace (/ \ b \ s * highlight \ b /, ''); (Dengan mendefinisikan .element di CSS, secara otomatis tetap sama di semua tempat juga.)

— Chuck Kollars

Ups, kelas kemungkinan lupa ditentukan lebih dari sekali. Untuk menangani kasus itu juga, tambahkan tanda 'g' ke ekspresi reguler: theElement.className = theElement.className.replace (/ \ / b \ s * highlight \ b / g, '');

— Chuck Kollars

menggunakan properti node daftar kelas alih-alih className

— Shishir Arora

4

Menggunakan

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

Untuk javascript asli

— Shishir Arora
sumber

2

Di jQuery, Anda bisa menggunakan

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

— Almhar
sumber

1

Sepenuhnya menghapus gaya, tidak hanya disetel ke NULL

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

— Vitalicus
sumber

0

Hapus removeProperty

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>

Luaskan cuplikan

— ßãlãjî
sumber