setAttribute(“style”, “overflow: hidden;”) не работает

17 января 2021, 12:40

есть код

var obj_div = document.getElementById('filter_knob_id_1'); 
obj_div.setAttribute("style", "border:1px solid #CECECE;background:#ffffff;"); 
obj_div.setAttribute("style", "overflow: hidden;");

<div id="filter_knob_id_1" name="scr_head" style="border:1px solid #CECECE;background:#ffffff;"> 
  <input type='checkbox' $sel_str onchange='document.filter_note.submit()' name='vendor_1' id='id_1_1'><label for='id_1_1' id='label_id_1_1'>Asus</label><br> 
  <input type='checkbox' $sel_str onchange='document.filter_note.submit()' name='vendor_2' id='id_1_2'><label for='id_1_2' id='label_id_1_2'>MSI</label><br> 
  <input type='checkbox' $sel_str onchange='document.filter_note.submit()' name='vendor_3' id='id_1_3'><label for='id_1_3' id='label_id_1_3'>GigaByte</label> 
 
</div>

не могу понять, почему не работает obj_div.setAttribute("style", "border:1px solid #CECECE;background:#ffffff;"); (при выполнении этого фрагмента javascript border принимает значение 0px none rgb(0, 0, 0)) и obj_div.setAttribute("style", "overflow: hidden;"); это тоже не выполняется..

Answer 1

Вы можете использовать один из следующих способов

// Устанавливает несколько стилей в одном выражении
elt.style.cssText = "color: blue; border: 1px solid black"; 
// Или
elt.setAttribute("style", "color:red; border: 1px solid blue;");

В вашем случае вы перезаписываете атрибут

Подробнее:

https://developer.mozilla.org/ru/docs/Web/API/HTMLElement/style