如何修改用过的CSS框架产生的CSS内联元素？

Question

考虑下图，我想知道如何从我正在使用的框架 MaterializeCSS 中更改javascript的内联CSS产生。在我的html中，我定义了这一点：

<ul id='profile-settings' class='dropdown-content' style="display: block; width: 250px !important; left: 124px !important; top: 87.5156px !important;">

，但是输出将始终将我的代码替换为这种样式（可能是由于javascript设置的默认样式？）：

<ul id='profile-settings' class='dropdown-content' style="display: block; width: 100px; left: 275px; top: 51.5156px; height: 194px; transform-origin: 100% 0px; opacity: 1; transform: scaleX(1) scaleY(1);">

我查看了框架的默认javascript，但我只找到了这个：

{key:"_handleMouseLeave",value:function(t){var e=t.toElement||t.relatedTarget,i=!!h(e).closest(".dropdown-content").length,n=!1,s=h(e).closest(".dropdown-trigger");s.length&&s[0].M_Dropdown&&s[0].M_Dropdown.isOpen&&(n=!0),n||i||this.close()}},{key:"_handleDocumentClick",value:function(t){var e=this,i=h(t.target);this.options.closeOnClick&&i.closest(".dropdown-content").length&&!this.isTouchMoving?setTimeout(function(){e.close()},0):!i.closest(".dropdown-trigger").length&&i.closest(".dropdown-content").length||setTimeout(function(){e.close()},0),this.isTouchMoving=!1}},{key:"_handleTriggerKeydown",value:function(t){t.which!==M.keys.ARROW_DOWN&&t.which!==M.keys.ENTER||this.isOpen||(t.preventDefault(),this.open())}},{key:"_handleDocumentTouchmove",value:function(t){h(t.target).closest(".dropdown-content").length&&(this.isTouchMoving=!0)}}

我应该怎么做才能更改此默认值

    display: block;
    width: 100px;
    left: 275px;
    top: 51.5156px;
    height: 194px;
    transform-origin: 100% 0px;
    opacity: 1;
    transform: scaleX(1) scaleY(1);

进入

    display: block;
    width: 250px;
    left: 124px;
    top: 87.5156px;
    height: 194px;
    transform-origin: 100% 0px;
    opacity: 1;
    transform: scaleX(1) scaleY(1);

Answer 1

您应该尝试使用 setTimeout 将代码放入 jquery 或 javascript 代码中，而不是内联地写入ul。有一个JavaScript代码可以覆盖您的内联样式。

为此：

setTimeout(function(){
   $('.profile-settings').css({
       'display':'block',
       'width':'250px',
       'left':'124px',
       'top':'87.5156px',
       'height':'194',
       'transform-origin':'100% 0',
       'opacity':'1',
       'transform':'scaleX(1) scaleY(1)'
   })
},1000);

那应该应用您想要应用的代码。 在前端方面，这是一种不好的做法，但如果没有其他方法，请立即执行。

Answer 2

您可以尝试myonline的建议，但可以使用点击侦听器

$(document).ready(function() {
  $('.profile-settings').click(function() {
    $('.profile-settings').css({
      'display': 'block',
      'width': '250px',
      'left': '124px',
      'top': '87.5156px',
      'height': '194',
      'transform-origin': '100% 0',
      'opacity': '1',
      'transform': 'scaleX(1) scaleY(1)'
    })
  });
});

并确保您的脚本在框架脚本之后加载。