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

https://stackoverflow.com/questions/11962962/overriding-important-with-css-or-jquery has a few different strategies for this. Here's one working: https://jsfiddle.net/fhv1kztm/ — Jeremy Ninnes, Apr 07 '21 at 03:34

score 1 · Answer 1 · answered Apr 07 '21 at 03:58

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

  });

});

score 0 · Answer 2 · answered Apr 07 '21 at 03:18

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 07 '21 at 03:18

Justine

18
3

Sorry, I don't think you understand what the code is doing, I need the output of the inline style to include !important – webmonkey237 Apr 07 '21 at 03:24

score 0 · Answer 3 · answered Apr 07 '21 at 04:19

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 07 '21 at 04:19

Kd Nimavat

282
1
11

Another great example, Thanks – webmonkey237 Apr 08 '21 at 20:50

score 0 · Answer 4 · answered Apr 07 '21 at 05:12

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>

jQuery: Adding important to an inline style function

4 Answers4