Применить CSS класс (важно!) В TextBox с помощью JQuery

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 и изменить ширину V65-OnePage-billlastname к 150px, используя Jquery, что метод, используемый

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 itsself не может понять приоритеты. Однако вы можете изменить атрибут стиля:

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, который перекроет первоначальную ширину, будучи более конкретный. например

<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');