предотвращение изменения jquery в фокусе css

Question

Начальный css:

#id_etiket{
width: calc(94% + 1px);

Я изменяю ширину элемента через jquery, как показано ниже:

     function entry_delete(id){
        if('{{request.user_agent.is_mobile}}' === "False"){
        $('#id_etiket').css('width', "calc(94% + 2px)");

Ширина этого же элемента также изменяется на css сторона, пока он сфокусирован:

#id_etiket:focus{
    width: calc(100% - 7px);}

Когда функция jquery запускается первой, она также переопределяет элемент по ширине фокуса и становится calc(94% + 2px) вместо width: calc(100% - 7px). Есть ли способ предотвратить это?

Answer 1

Также вы можете использовать CSS переменных вместо !important. (Я показал с фоном, чтобы было понятнее.)

$('#id_etiket').css('--custom-bg', "red");

#id_etiket {
  /*          var( use this variable if exist, fallback (default) value) */
  background: var(--custom-bg, blue);
}

#id_etiket:focus {
  background: yellow;
}

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

<input type="text" id="id_etiket">

Для вашего случая:

$('#id_etiket').css('--custom-width', "calc(94% + 2px)");

#id_etiket {
  width: var(--custom-width, calc(94% + 1px));
}

#id_etiket:focus {
  width: calc(100% - 7px);
}

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

<input type="text" id="id_etiket">

Answer 2

Вы можете использовать !important в своем CSS.

$('#id_etiket').css('width', "calc(94% + 2px)");

#id_etiket:focus{
    width: calc(100% - 7px) !important;
}
html, body {
  margin: 0;
  padding: 0;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="id_etiket" style="border: 1px solid black; background-color: dodgerblue;" tabindex="-1">
Click to focus
</div>