Elementtien koon muuttaminen jqueryllä. Työskentely elementin leveyden kanssa. Muokattavan vuorovaikutuksen määrittäminen

jQuery DOM -menetelmien määritelmä ja sovellus

jQueryn .width()-menetelmä saa tällä hetkellä lasketun leveyden ensimmäiselle elementille sovitettujen elementtien joukossa tai asettaa kunkin vastaavan elementin leveyden.

Huomaa, että ero .css-menetelmien välillä (" leveys") ja .width() tarkoittaa, että jälkimmäinen palauttaa arvon määrittämättä yksiköitä, kun taas edellinen palauttaa arvon pikseliä(esimerkki alla).

jQueryn .width()-menetelmää suositellaan, kun haluat käyttää elementin leveyttä matemaattisessa laskennassa. Elementin korkeuden laskemiseksi käytä .height()-menetelmää.

jQueryn .width()-menetelmä voi myös löytää ikkunan tai asiakirjan leveyden:

$(document).width() // palauttaa HTML-dokumentin leveyden $(window).width() // palauttaa selaimen näkymän leveyden

jQueryn .width()-metodin tarkkuutta ei taata, kun elementti tai sen ylätaso on piilotettu. Tarkan arvon saamiseksi varmista, että elementti on näkyvissä ennen menetelmän käyttöä. jQuery yrittää väliaikaisesti näyttää elementin ja sitten piilottaa sen uudelleen mitatakseen sen mitat, mutta tämä menetelmä ei ole luotettava ja voi vaikuttaa sivun suorituskykyyn. Tämäntyyppinen mittaustoiminto voidaan poistaa jQuery-kirjaston tulevasta versiosta.

Menetelmä versiosta jQuery 1.8 laskee ja palauttaa elementin leveyden riippumatta siitä, mitä leveyden ja korkeuden laskentamallia käytetään (content-box tai box-sizing'in border-box-ominaisuudet). Eli menetelmä vähentää reunat ja täyte. Jos et ole tyytyväinen tähän, käytä .css-menetelmää (" leveys"). Alla on esimerkki näiden kahden mallin ja näiden menetelmien vertailusta.

jQuery-syntaksi: Palautusarvot: 1.0 syntaksi: $(valitsin).width() // käytetty menetelmä ilman parametreja Asetusarvot: 1.0 syntaksi: $(valitsin).width( arvo) arvo- Merkkijono (arvo mielivaltaisissa yksiköissä) tai kokonaisluku (arvo pikseleinä) Syntaksi 1.4.1: $(valitsin ).width(funktio ( indeksi, nykyinen arvo)) indeksi- Kokonaisluku nykyinen arvo- Kokonaisluku. Lisätty jQuery 1.0:ssa (syntaksi päivitetty versiossa 1.4.1) Parametrien arvot Käyttöesimerkki jQuery .width() -menetelmän käyttäminen (arvon palauttaminen) konsoli .log($("p ").css("width")); // käyttämällä .css()-metodia

konsoli .log($("p ").width()); // käyttämällä.width()-metodia palaamme ja näytämme selainkonsolin ensimmäisen elementin leveyden

konsoli .log($(asiakirja).leveys()); // palauttaa ja näyttää HTML-dokumentin leveyden selainkonsolin konsolissa .log($(window).width()); // palauttaa ja näyttää selaimen näkymän leveyden selainkonsolissa ) ); ) ); Itkeä

Tavallinen kappale

Toinen tavallinen kappale

• .css() palauttaa ja näyttää selainkonsolin ensimmäisen elementin leveyden

  .

• Käyttämällä jQuery .width() -menetelmää, palautamme ja näytämme selainkonsolin ensimmäisen elementin leveyden

  , HTML-dokumentin leveys ja selaimen näkymän leveys.

Esimerkkimme tulos:

Tarkastellaan seuraavaa esimerkkiä, jossa tarkastellaan .width()- ja .css()-menetelmän välistä eroa, kun käytät malleja sisältölaatikon ja border-box-elementtien leveyden ja korkeuden laskemiseen:

jQueryn .width()-menetelmän käyttäminen (content-box ja border-box mallit)

.test1 ( box-sizing : content-box ; /* oletusmalli (sisältää vain elementin sisällön) */ leveys : 200px ; /* elementin leveys */ täyte : 10px ; reunus : 10px tasainen vihreä ; ) .test2 ( box- mitoitus : border-box ; /* border-box malli (sisältää elementin sisällön, reunat ja täyte) */ leveys : 200px : 10px /* täyte : 10px tasainen vihreä ; /* 10px kiinteä vihreä reunus */ )

$(document).ready(function ()( $("button ").click(function ()( // aseta funktio, kun elementtiä napsautetaan konsoli .log($().test1 ").css("width ") ); // käyttämällä .css()-metodia class.test1-konsolin kanssa .log($(".test1 ").width()); // käyttämällä.width()-metodia palaamme ja näytämme leveyden elementin luokkaa selainkonsolissa .log($(".test2 ").css("width") // .css()-metodilla palaamme ja näytämme leveyden elementti luokan .test2 konsolin kanssa .log($(" .test2 ").width() // palauttaa ja näyttää selainkonsolissa elementin leveyden, jonka luokka on .test2 ) ) ); Itkeä

Tavallinen kappale

Tavallinen kappale

Tässä esimerkissä, kun napsautamme painiketta:

• Palautamme ja näytämme elementin leveyden arvon selainkonsolissa käyttämällä jQuery .css() -menetelmää.

  luokan kanssa testi1 Ja testi 2. Huomaa, että riippumatta siitä, mitä mallia elementit käyttävät, tulos on sama.

• jQuery .width() -menetelmää käyttämällä palautamme ja näytämme elementin leveyden arvon selainkonsolissa

  luokan kanssa testi1 Ja testi 2. Huomaa, että toisessa tapauksessa, jossa elementti

  käyttää border-box -mallia, tulosarvo ei sisällä sekä elementin reunaa että täyttöä. Tämä on ero tämän menetelmän ja .css()-menetelmän välillä border-box-menetelmää käytettäessä.

Esimerkkimme tulos:

.width() asetamme leveysarvot palautuksen sijaan.

jQuery .width() -menetelmän käyttäminen (arvojen asettaminen)

p(taustaväri: oranssi;)

$(document).ready(function ()( $("button ").click(function ()( // aseta funktio, kun elementtiä napsautetaan $().test1 ").width(150 ); // set luokan test1 elementtien leveys pikseleinä $(.test2 ").width("35% " // aseta elementtien leveys luokan testi2 prosentteina ) ) ); Itkeä

Tavallinen kappale

Tavallinen kappale

Tavallinen kappale

Tavallinen kappale

Tässä esimerkissä, kun painiketta napsautetaan, käytämme jQueryn .width()-menetelmää elementtien leveyden asettamiseen.

luokan kanssa testi1 yhtä kuin 150 pikseliä, ja elementtejä luokan kanssa testi 2 leveys yhtä suuri kuin 35% pääelementistä.

Huomaa, että jos määrität muun arvon kuin pikseleitä (määrittelemättä yksiköitä), arvo on välitettävä merkkijonona.

Esimerkkimme tulos:

Tarkastellaan seuraavaa esimerkkiä, jossa välitämme funktion parametrina .width()-metodille.

jQuery .width() -menetelmän käyttäminen (funktio parametrina)

div ( taustaväri : keltainen ; /* aseta taustaväri */ )

$(document).ready(function ()( $("div ").click(function ()( // aseta funktio, kun elementtiä napsautetaan $(this ).width(function ( indeksi, nykyinen arvo)( // aseta funktio, kun napsautat tietyn elementin palautusta nykyinen arvo- 50; // palauttaa elementin leveyden uuden arvon (nykyinen arvo miinus 50 pikseliä) ) ); ) ); ) ); Itkeä

Tässä esimerkissä välitämme funktion parametrina .width()-metodille, joka palauttaa ja asettaa uuden arvon napsautetun elementin leveydelle. Tässä tapauksessa elementin uusi leveys lasketaan elementin nykyisen leveyden miinus 50 pikseliä.

Esimerkkimme tulos:

Tarkastellaan seuraavaa esimerkkiä, jossa .resize()- ja .width()-metodeja käyttämällä seuraamme selaimen näkymäportin leveyttä ja määritämme sen muuttuessa tietyn taustavärin.

jQueryn .width()-menetelmän käyttäminen ikkunan leveyden muuttamisessa $(document).ready(function ()( $(window).resize(function () ( // sitoa tapahtumakäsittelijä (käynnistyy, kun ikkunan kokoa muutetaan) if () $(this ).width() 1000 && $(this ).width() > 800) ( // Jos näkymän leveys on alle 1000 pikseliä ja suurempi kuin 800 pikseliä $("body ").css("background- color ", "keltainen" ); // aseta taustaväriksi keltainen ) else if ($(this ).width() 800 && $(this ).width() > 600) ( // Jos näkymän leveys on pienempi yli 800 pikseliä ja yli 600 pikseliä $( "body ").css("background-color", "green" // aseta taustaväriksi vihreä ) else ( // jos mikään ehdoista ei täyty $(); "body ").css("background-color " , "blue" // aseta taustaväri siniseksi ) ) ); Yritä muuttaa ikkunan kokoa

Tässä esimerkissä seuraamme selaimen näkymän leveyttä käyttämällä .resize()- ja .width()-metodeja ja, kun se muuttuu, asetamme elementille tietyn taustavärin. 1000 pikseliä ja enemmän 800 pikseliä keltainen. Jos näkymän leveys on pienempi 800 pikseliä ja enemmän 600 pikseliä, taustaväri asetetaan vihreä, muissa tapauksissa taustaväriksi asetetaan sininen.

Huomaa, että kun sivu latautuu, väri on valkoinen, koska toiminto suoritetaan vain, kun ikkunan kokoa muutetaan (jQuery .resize() -menetelmä).

Esimerkkimme tulos.

Leveys() .innerWidth() .outerWidth()

Funktiot palauttavat elementin leveyden. Lisäksi voit asettaa uuden leveyden arvon width()-toiminnolla. Toimintojen käyttämiseen on useita vaihtoehtoja:

width() — elementin leveys ottamatta huomioon pehmustetta ja reunan paksuutta.
innerWidth() — elementin leveys ottaen huomioon sisäisen pehmusteen koon.
outerWidth(includeMargin) — elementin leveys, jossa otetaan huomioon sisäinen täyte, reunus (reunuksen leveys) ja tarvittaessa ulkoinen täyte (marginaali).

asettaa uudeksi leveyden arvoksi arvo, kaikille valituille elementeille

asettaa uuden elementin leveyden arvoon, jonka mukautettu funktio palauttaa. Funktiota kutsutaan erikseen jokaiselle valitulle elementille. Kutsuttaessa sille välitetään seuraavat parametrit: indeksi— elementin sijainti sarjassa, arvo— elementin leveyden nykyinen arvo.

Esimerkkejä käytöstä:

$("div.content").width()	sisältö.
$(asiakirja).width()	palauttaa koko sivun leveyden
$(.content").width(30)	asettaa leveyden arvoksi 30 pikseliä kaikille luokan elementeille sisältö.
$("div.content").outerWidth()	palauttaa luokan ensimmäisen div-elementin leveyden sisältö. Korkeusarvo sisältää pehmusteen ja reunuksen paksuuden
$("div.content").outerWidth(true)	samanlainen kuin edellinen esimerkki, mutta leveysarvo sisältää myös pehmusteen.

Huomautus 1: .width()-funktion käyttäminen on yleensä kätevämpää kuin .css("width"), koska sen palauttama arvo ei sisällä päätettä "px". Eli ensimmäisessä tapauksessa saat 30 ja toisessa "30px".

Muistio 2: On tärkeää huomata, että käyttämällä .width(name) -menetelmää saat vain kaikkien valittujen elementtien ensimmäisen elementin attribuuttiarvot. Jos tarvitset kaikkien elementtien arvot, sinun tulee käyttää rakenteita, kuten .map() tai .each() .

Toiminnassa

Lisää toisen rivin kaikkien elementtien leveyttä 10 pikselillä.

~lt~!DOCTYPE html~gt~ ~lt~html~gt~ ~lt~head~gt~ ~lt~script src="http://code.jquery.com/jquery-latest.js"~gt~~ lt~/script~gt~ ~lt~style~gt~ ul( marginaali: 10px; ) .item( float: vasen; korkeus: 20px; margin: 1px; täyttö: 3px; taustaväri: #eee; listatyyli -type:none; style="width:60px"~gt~ Korkea ~lt~/li ~gt~ ~lt~li class="item iioo" style="width:75px"~gt~ Nopea ~lt~/li ~gt~ ~lt ~li class="item" style="width:90px"~gt~ Vahva ~lt~/li ~gt~ ~lt~/ul~gt~ ~lt~br~gt~ ~lt~ul id="list2" ~gt~ ~lt~li class="item" style="width:60px"~gt~ Yllä ~lt~/li ~gt~ ~lt~li class="item" style="width:75px"~gt~ Nopeampi ~lt~/li ~gt~ ~lt~li class="item" style="width:90px"~gt~ Vahvempi ~lt~/li ~gt~ ~lt~/ul~gt~ ~lt~script~ gt~ $("#list2 .item").width(function(i,val)( return val+10; )); ~lt~/script~gt~ ~lt~/body~gt~ ~lt~/html~gt~

Palauttaa ja asettaa elementin leveyden.

• versio lisätty: 1.0.leveys()

  Palauttaa: Kokonaisluku

  Hakee elementin leveyden

• versio lisätty: 1.0.width(arvo)

  Tyyppi: merkkijono tai numero

  Palauttaa: jQuery

  Kokonaisluku, joka edustaa pikselien määrää, tai luku, jossa on merkkijonoyksikkö.

• versio lisätty: 1.4.1.width(funktio(indeksi,leveys))

  funktio (indeksi, leveys)

  Tyyppi: Toiminto

  Palauttaa: jQuery

  Funktio, joka palauttaa leveyden asettaakseen uuden. Hakee elementin sijaintiindeksin joukossa ja vanhan leveysarvon. Funktio viittaa nykyiseen elementtiin.

Ero .css("width") ja .width() välillä on, että tämä menetelmä palauttaa vain numeerisen arvon (esimerkiksi 400, ei 400 pikseliä). .width()-menetelmää suositellaan käytettäväksi, kun tuloksena olevaa arvoa on käytettävä matemaattisissa laskelmissa.

Tällä menetelmällä voidaan määrittää asiakirjan ja ikkunan leveys.

$(ikkuna).width(); $(asiakirja).width();

Huomaa, että .width()-menetelmä palauttaa aina sisällön leveyden riippumatta CSS-laatikon kokoominaisuuden arvosta. jQuery 1.8:sta lähtien sinun on hankittava laatikon koon ominaisuuden arvo ja vähennettävä sitten reunuksen ja täyteen koko. Kaikki tämä, jos elementissä käytetään box-sizing: border-box -ominaisuutta. Välttääksesi nämä laskelmat, käytä .css("width").

Voit välittää joko merkkijonon tai luvun .width(value)-metodille. Jos vain numero välitetään, jQuery lisää automaattisesti "px". Jos viiva, sen pitäisi näyttää tältä: 100px, 50% tai auto. Huomaa, että nykyaikaisissa selaimissa leveys ei sisällä täyte- ja reunusarvoja.

Esimerkkejä:

Esimerkki: Näytä erot elementtien leveyksissä. Koska elementit ovat iframe-kehyksessä, todelliset mitat voivat olla hieman erilaisia.

leveys esittelyteksti ( tausta: keltainen; ) painike ( font-size: 12px; margin: 2px; ) p (leveys:150px; border:1px red solid; ) div ( color:red; font-weight:bold; ) Hae kappale Leveys Hae asiakirjan leveys Hae ikkunan leveys

Esimerkkikappale testin leveydestä

function showWidth(ele, w) ( $("div").text("Kohteen " + ele + " leveys on " + w + "px."); ) $("#getp").click(function () ( showWidth("kappale", $("p").width()); )); $("#getd").click(function () ( showWidth("asiakirja", $(asiakirja).leveys()); )); $("#getw").click(function () ( showWidth("window", $(window).width()); ));

Esimerkki: Aseta eri leveydet, kun napsautat div-elementtejä.

leveys esittely div ( leveys: 70px; korkeus: 50px; float:vasen; marginaali: 5px; tausta: punainen; kohdistin: osoitin; ) .mod ( tausta: sininen; kohdistin: oletus; ) d d d d d (function() ( var modWidth = 50; $("div").one("napsautus", funktio () ( $(this).width(modWidth).addClass("mod"); modWidth -= 8; ))();

Melko ikivanha tehtävä seurata sivun mielivaltaisen elementin koon muutosta. Se on olennaista luotaessa modulaarista riippumatonta rakennetta halutun elementin kokojen ja muiden CSS-attribuuttien säätämiseksi sivulla, erityisesti lohkoissa, joissa Ajax-lataus on säännöllistä (esimerkiksi uutiset). Tyypillisesti ratkaistaan ​​ajoituksella ja säännöllisellä elementtikokojen kyselyllä. Uusi vaihtoehto, joka ei käytä ajastettua kyselyä.

Temppu: Lisää elementin sisään tyhjä kehys, jonka mitat ovat positio:absoluuttiset ja 100 %, anna elementille sijainti:suhteellinen; . Ja seuraamme frame.onresizea:

Testikoodi: Tässä on sisältö... frame.onresize = function())( alert("#Test div on muutettu."); ) setTimeout(function())( //Testaa koon muutos 3 sekunnin kuluttua. asiakirja. getElementById("Testi ").style.width="100px" ),3000); Spoilerin alla Toiveet huomioiden tarkempi koodi:

Laajennettu koodi

Koodi: Tässä on sisältö... setTimeout(function())( // Kehysviiveen selvittäminen (FF ja IE) var timerResize="first"; frame.onresize = function())( // frame, - Frame nimi (name=frame ) - katso koodin alku if(timerResize!=="first")clearTimeout(timerResize=setTimeout(function())( // Liiallisten liipaisujen tyhjennys; alert; div #Testa on muutettu."); / / "onresize"-tapahtuman käsittelyn runko; ),20) // Parametri 20(ms) - riippuu halutusta vastenopeudesta toistuviin tapahtumiin; // relevantti sujuvan muutoksen kannalta elementin koossa, // tai lähes samanaikainen koon muuttaminen useilla eri prosesseilla ) ),200). setTimeout(function())( //Testaa koon muuttaminen. document.getElementById("Testi").style.width="100px"; ),3000); setTimeout(function())( //Testaa koon muuttaminen. document.getElementById("Testi").style.width="200px"; ),7000);