Jquery，如何更改webkit属性？

Question

我想弄清楚如何更改 jquery 中的 webkit 属性以删除输入微调器？为了在 CSS 中做到这一点，你有这样的代码：

.quantity::-webkit-inner-spin-button, 
.quantity::-webkit-outer-spin-button { 
  -webkit-appearance: none; 
  margin: 0; 
}

但我想用 jquery 添加“-webkit-apperance:none;”和“margin:0”

我已经尝试过：

$('input[type=number]').css({
                "display":"-webkit-outer-spin-button"
            }).css({
                '-webkit-appearance':'none',
                'margin':'0'
            });

我已经尝试过：

 $('input[type=number]::-webkit-outer-spin-button')({
       '-webkit-appearance':'none',
       'margin':'0'
 });

和：

$('input[type=number]').css({
            '-webkit-inner-spin-button': '',
             '-webkit-outer-spin-button':''({
                 '-webkit-appearance':'none',
                 'margin':'0'
             })


 });

Answer 1

旋转按钮是伪元素并且“不会成为DOM的一部分”。
所以 jQuery 无法直接访问它们。

我建议使用 jQuery 添加/删除定义

-webkit-appearance

的类。

jQuery('#trigger').on('click', function() {
  jQuery('.quantity').addClass('hide_spin');
});

.quantity.hide_spin::-webkit-inner-spin-button,
.quantity.hide_spin::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}


/* just for demo */

.quantity.hide_spin {
  background-color: lightgreen;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<button type="button" id="trigger">Click To Remove Spinner</button>
<input type="number" class="quantity">

Answer 2

您可以使用数据属性。

 $css = 'display:inline-block; -webkit-mask:url(/templates/styles/footer_widget/1.svg) no-repeat center center; -webkit-mask-size:contain; background-color:#333';
$(this).attr('style',$css);