防止 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 function 首先被觸發時，它也會覆蓋元素的焦點寬度，它變為calc(94% + 2px)而不是width: calc(100% - 7px) 。 有什么方法可以防止嗎？

Answer 1

您可以在 CSS 中使用!important important。

 $('#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>

Answer 2

您也可以使用 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">