jQuery: Adding important to an inline style function

Question

I need to add "!important" to a function that adds an inline style however I have a funny feeling that the way the script is done, it won't work, I am hoping someone might shine a light on the issue.

In my jQuery example if I remove

 + ' !important'

The script works fine however I need to add the important part to override other CSS I don't have access to edit.

The end output will look like:

  <a href="" class="eaContIcon" style="background:#0033ff !important;">
    Text
    <span class="customHex">#0033ff</span>
  </a>

HTML

<div class="mobContCon">

  <a href="" class="eaContIcon">
    Text
    <span class="customHex"></span>
  </a>

  <a href="" class="eaContIcon">
    Text
    <span class="customHex">#0033ff</span>
  </a>

  <a href="" class="eaContIcon">
    Text
    <span class="customHex">#ff00ff</span>
  </a>

</div>

CSS

a.eaContIcon {
  height: 40px;
  padding: 10px;
  background: #ff0000 !important;
  margin: 0 1px;
  color: #fff;
  text-decoration: none;
}

.customHex {
  display: none;
}

jQuery

$(document).ready(function() {

  $('.mobContCon a').each(function() {
    $(this).addClass('eaContIcon');
  });

  $('.eaContIcon').css('background', function() {
    return $(this).children('.customHex').text() + ' !important';

  });

});

Here is a FIDDLE

stackoverflow.com/questions/11962962/… has a few different strategies for this. Here's one working: jsfiddle.net/fhv1kztm — djehrame
– djehrame, Commented Apr 7, 2021 at 3:34

webmonkey237 · Accepted Answer · 2021-04-07 03:58:19Z

1

This was sorted by a comment on the original post by Jeremy

$(document).ready(function() {

  $('.mobContCon a').each(function() {
    $(this).addClass('eaContIcon');
  });

  $('.eaContIcon').attr('style', function() {
    return 'background:' + $(this).children('.customHex').text() + ' !important';

  });

});

answered Apr 7, 2021 at 3:58

webmonkey237

3791 gold badge3 silver badges21 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Justine · Accepted Answer · 2021-04-07 03:18:56Z

0

The best practice would be to transfer !important into your .customHex class and remove it in your jQuery code. It should look like this:

.customHex {
display: none !important;
}

For references you can refer to this link: https://www.w3schools.com/css/css_important.asp

answered Apr 7, 2021 at 3:18

Justine

284 bronze badges

1 Comment

webmonkey237 Over a year ago

Sorry, I don't think you understand what the code is doing, I need the output of the inline style to include !important

Kd Nimavat · Accepted Answer · 2021-04-07 04:19:34Z

0

I have remove extra js code that might not needed. You can try this, it will work.

$(document).ready(function() {
  $('.mobContCon a').each(function() {
      let objthis = $(this);
      let backgroundColor = objthis.children('.customHex').text() + ' !important';

      objthis.addClass('eaContIcon');
      objthis.attr("style","background :" + backgroundColor);

     });
});

answered Apr 7, 2021 at 4:19

Kd Nimavat

2821 silver badge12 bronze badges

1 Comment

webmonkey237 Over a year ago

Another great example, Thanks

Raeesh Alam · Accepted Answer · 2021-04-07 05:12:45Z

Checking Hex color code is empty or not with help of conditional (ternary) operator and override background color.
I hope below snippet will help you a lot.

$(document).ready(function () {
    $('.mobContCon a').each(function () {
        var _this = $(this);
        _this.addClass('eaContIcon');
    
        var getColorCode = _this.find('.customHex').text();
        getColorCode != ''?  _this.attr("style", "background:" + getColorCode + '!important'): ''
    });
});

a.eaContIcon {
    height: 40px;
    padding: 10px;
    background: #ff0000 !important;
    margin: 0 1px;
    color: #fff;
    text-decoration: none;
}
.customHex {
    display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="mobContCon">
    <a href="" class="eaContIcon">
        Text
        <span class="customHex"></span>
    </a>
    <a href="" class="eaContIcon">
        Text
        <span class="customHex">#0033ff</span>
    </a>
    <a href="" class="eaContIcon">
        Text
        <span class="customHex">#ff00ff</span>
    </a>
</div>

Collectives™ on Stack Overflow

jQuery: Adding important to an inline style function

4 Answers 4

Comments

1 Comment

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

1 Comment

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related