Question

HTML看起来像

<td>
    <input type="text" onkeydown="" style="" value="" id="v65-onepage-billlastname" name="BillingLastName" maxlength="50" size="25" class="co-text">
</td>

我的CSS类（请注意我无法将.CSS文件更改为从其他服务器远程调用它）

#v65-onepage-billfirstname, #v65-onepage-billlastname, #v65-onepage-billcompanyname, #v65-onepage-billaddr1, #v65-onepage-billaddr2, #v65-onepage-billcity, #v65-cart-billemail, #v65-onepage-shipfirstname, #v65-onepage-shiplastname, #v65-onepage-shipcompanyname, #v65-onepage-shipaddr1, #v65-onepage-shipaddr2, #v65-onepage-shipcity {
    width: 280px !important;
}

要覆盖CSS并使用Jquery将v65-onepage-billlastname的宽度更改为150px，使用的方法是什么

Answer 1

没有混合javascript和css，只需定义两个CSS规则

#v65-onepage-billfirstname { width: 280px !important }
#v65-onepage-billfirstname.afterJSExecution { width: 150px !important }

并添加一个类似

的类

$('#v65-onepage-billfirstname').addClass('afterJSExecution');

示例小提琴：http://jsfiddle.net/JQtmt/

Answer 2

jQuery自己无法理解优先级。但是，您可以更改样式属性：

var id = '#v65-onepage-billlastname';
var curStyle = $(id).attr('style');
if (curStyle)
    $(id).attr('style', curStyle + 'width: 150px !important');
else
    $(id).attr('style', 'width: 150px !important');

Answer 3

您可以通过在HTML或JQuery中为输入添加一个额外的类来实现此目的，以便提供一种CSS样式，通过更具体地覆盖原始宽度。 e.g。

<style type="text/css">

    /* existing style */
    #namedElement {
        width: 280px !important;
    }

    /* new style */
    #namedElement.co-text.namedElementOverride {
        width: 100px !important;
    }

</style>

然后只需使用附加标记更新HTML（原始示例中已存在共同文本）

<input type="text" onkeydown="" style="" value="" id="namedElement" maxlength="50" size="25" class="co-text namedElementOverride" />

或者用JQuery分配新类;

    $('#namedElement.co-text')
        .addClass('namedElementOverride');

使用JQuery将CSS Class（！important）应用于TextBox

3 个答案: