Jquery, работа с CSS

»» Тази статия съдържа изходния код на примерите. Запазване на тази страница, за да се тества примерите по-долу.

JQuery библиотека предоставя редица удобни специализирани методи, значително опростява работата с CSS стилове. Един от най-широко използваните методи от този вид е CSS () метод. кратко описание на който е даден в таблицата по-долу:

Връща стойността на посочения имот за първия от елементите, съдържащи се в JQuery на обект

Тя определя стойността на определени свойства на всички елементи, съдържащи се в JQuery на обект

Задава няколко свойства едновременно за всички елементи, съдържащи се в обект JQuery, използвайки обект на дисплея

Задава стойности на споменатите свойства за всички елементи, съдържащи се в обект JQuery, като се използва

Когато четете стойността на имотите чрез метод CSS () можете да получите стойността на имота, който е първи от елементите, съдържащи се в JQuery на обекта. В същото време, когато инсталирате промяната на свойствата прилага по отношение на всички елементи на набор. Пример CSS () простият използването метод е даден по-долу:

В този сценарий, ние подбираме всички етикета на елементи, ние се използва метод на CSS (), стойността на шрифта и го покажете на конзолата. Ние след това отново да изберете всички елементи на етикета и присвояване на нова стойност на същите свойства на всички елементи.

Въпреки факта, че скриптът използва действителното име на собственост (размер на шрифта), а не запис си с регистъра, т.е. нотация, в която този имот е дефинирано в HTMLElement обект (FONTSIZE собственост), също така е възприема правилно, защото JQuery поддържа и двата.

В резултат на този сценарий на конзолата показва следния резултат:

Задаване на стойности за имота в празен низ ( "") се равнява на премахването на свойствата на атрибута стил на този елемент.

Създаване едновременно няколко CSS свойства

Има два начина да настроите някои CSS имоти. Първият от тях - е образуването на веригата на метод изисква CSS (), както е показано по-долу:

В този сценарий, задаване на стойността на имотите размер на шрифта и цвета. Същият ефект може да се постигне с помощта на обект дисплей, както е показано в примера по-долу:

И двата варианта сценарий води до същия резултат като този, показан по-долу:

Настройка на относителните стойности на

Като аргументи CSS () метод се като относителни стойности. Те представляват числова стойност предхожда от признаци и + = - =, и се добавят към или изважда от текущата стойност. Тази техника може да се използва само за числови стойности. Съответен пример е показано по-долу:

Относителни стойности са изразени в същите единици като стойностите на имотите. В този случай, размерът на шрифта се увеличава от 5 пиксела за нечетни елементи на етикета и намалява със същия размер дори. Резултатът е показан по-долу:

Задаване на свойства, като се използва

стойността на имотите може да се инсталира динамично предаване метод функция CSS (). Съответен пример е показано по-долу:

Аргументите се подават на функцията са индекса на елемента в комплекта и текущата стойност на имота. Отчасти това се отнася до предмета на HTMLElement съответстваща на елемента, както и функцията връща стойност, която искате да инсталирате.

Използването на специализирани техники за работа с CSS свойства

В допълнение към СГО () метод JQuery е определено в редица специализирани техники, предназначени да получите или да зададете стойности на специфични свойства. Списъкът на тези методи са дадени в таблицата по-долу:

Техники за специфичните свойства CSS

Задава височината и ширината на всички елементи в обекта, JQuery, като се използва

Имената на повечето от тези методи са ясни, но някои от тях се нуждаят от допълнително обяснение. офсет () и позиция () изведе обект, притежаващ свойства горния и левия. които показват позицията на елемента. Пример на метод за положение () е показано по-долу:

Този скрипт показва стойността на имотите конзола горната и лявата част на обекта е върната от метода. Резултатът е, както следва:

Настройка на ширина и височина с помощта на

Ширината и височината на набор от елементи, които могат да бъдат инсталирани динамично, минавайки ширина () и функция височина () като аргумент. Функционални аргументи са на позицията на елемента в комплекта и текущата стойност на имота. Както може би се досещате вече себе си, тази променлива се отнася до HTMLElement на обект, съответстващ на текущия елемент за обработка, както и функцията връща стойност, която искате да инсталирате. Съответен пример е показано по-долу:

В този сценарий, стойността на индекса, който определя позицията на елемента в комплекта се използва като фактор за регулиране на височината на елемента. Резултатът е показан по-долу: