Как изменить встроенный элемент CSS с помощью используемой платформы CSS?

Question

Учитывая изображение ниже, мне интересно, как я могу изменить встроенный css-продукт с помощью javascript из используемой мной платформы, MaterializeCSS . В моем 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

Вы должны попытаться поместить код в jquery или javascript код с setTimeout вместо записи его встроенным в 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);

Это должно применить код, который вы хотите применить. Это плохая практика на стороне frontend , но если нет другого способа, просто сделайте это сейчас.

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

И убедитесь, что ваш скрипт загружается после вашего скрипта фреймворка.