如何从element.style中删除多个css样式

时间:2017-12-18 19:50:42

标签: javascript jquery css

我的应用程序会生成一些内联样式。在某些时候,我需要删除heightwidthmax-width样式。

我找到了这样的元素:

const elems = window.$('.myElements');
    window.$.each(elems, (index, value) => {
      if (value.id.startsWith('myPanel')) {

这里我试过这个:

         window.$(value).css({height: '', maxWidth: '', width: ''});

和此:

         window.$(value)[0].style.height = '';
         window.$(value)[0].style.width = '';
         window.$(value)[0].style.maxWidth = '';

也是这样:

         window.$(value).css('height', '');             
         window.$(value).css('max-width', '');
         window.$(value).css('width', '');
      }
    });

并且无论它总是只删除第一个元素。我在这里缺少什么?

1 个答案:

答案 0 :(得分:3)

您可以使用带选择器的启动,无需执行循环



  $('div[id^="myPanel"]').each( function () {

    $(this).css({
      height: Math.floor(Math.random()*200) + "px",
      width: Math.floor(Math.random()*200) + "px"
    });
  })

window.setTimeout( function () {
  $('div[id^="myPanel"]').css({
    height: '',
    maxWidth: '',
    width: ''
  });}
, 1000);

div {
  background-color: green;
  margin: 1em;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="myPanel1" style="width:20px; height: 20px;">A</div>
<div id="myPanel2" style="width:20px; height: 20px;">B</div>
<div id="myPanel3" style="width:20px; height: 20px;">C</div>
<div id="myPanel4" style="width:20px; height: 20px;">D</div>
&#13;
&#13;
&#13;