0

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

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

4

3 回答 3

4

不混用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/

于 2012-05-31T15:18:40.910 回答
1

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');
于 2012-05-31T15:21:02.910 回答
0

您可以通过在 HTML 中或通过 JQuery 向输入添加一个附加类来实现这一点，以便提供一种 CSS 样式，该样式将通过更具体的方式覆盖原始宽度。例如

<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');
于 2012-05-31T15:26:06.377 回答