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

Question

我的应用程序生成一些内联样式。在某些时候，我需要删除 height、width 和 max-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', '');
      }
    });

而且不管怎样，它总是只删除第一个元素。我在这里缺少什么？

Answer 1

你可以使用 starts with 选择器，不需要做循环

  $('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>