HTML DOM Style objekti

Style-objekti

Style-objekti edustaa yksittäistä tyylidiraatiota.

Style-objektin ominaisuus

ominaisuus kuvaus
alignContent Aseta tai palauta joustavissa konteissa riviiden tasaus, kun projektit eivät käytä kaikkea vapaata tilaa.
alignItems Aseta tai palauta joustavissa konteissa projektien tasaus.
alignSelf Aseta tai palauta joustavissa konteissa valittujen projektien tasaus.
animation Kaikkien animaatioominaisuuksien lyhennetty ominaisuus, paitsi animationPlayState ominaisuus.
animationDelay Aseta tai palauta, milloin animaatio alkaa.
animationDirection Aseta tai palauta, tulisiko animaatio toistaa vaihtuvassa silmukan suuntaan päinvastoin.
animationDuration Aseta tai palauta animaation toistaa yhden kerran tarvittava aika sekunneissa tai millisekunneissa.
animationFillMode Aseta tai palauta animaation sovellettava arvo suoritusajan ulkopuolella.
animationIterationCount Aseta tai palauta animaation tulisi toistaa kertoja.
animationName Aseta tai palauta @keyframes-animaation nimi.
animationPlayState Aseta tai palauta animaation onko käynnissä vai tauko.
animationTimingFunction Aseta tai palauta animaation nopeuskaari.
background Aseta tai palauta kaikki taustan ominaisuudet yhdessä lauseessa.
backgroundAttachment Aseta tai palauta taustakuvan onko kiinteä vai liukuvan mukana.
backgroundClip Aseta tai palauta taustan piirtämisen alue.
backgroundColor Aseta tai palauta elementin taustaväri.
backgroundImage Aseta tai palauta elementin taustakuvan alkuperä.
backgroundOrigin Aseta tai palauta taustakuvan sijoitusalue.
backgroundPosition Aseta tai palauta taustakuvan alkupiste.
backgroundRepeat Aseta tai palauta, miten taustakuvaa toistetaan (taulutetaan).
backgroundSize Aseta tai palauta taustakuvan koko.
backfaceVisibility Aseta tai palauta, näytetäänkö elementti, kun se ei ole suunnattu näytölle.
border Aseta tai palauta reunan leveys, tyyli ja väri yhdessä lauseessa.
borderBottom Aseta tai palauta kaikki borderBottom-ominaisuudet yhdessä lauseessa.
borderBottomColor Aseta tai palauta alapuolen reunan väri.
borderBottomLeftRadius Aseta tai palauta vasemman reunan kulman muoto.
borderBottomRightRadius Aseta tai palauta oikean reunan kulman muoto.
borderBottomStyle Aseta tai palauta alapuolen reunan tyyli.
borderBottomWidth Aseta tai palauta alapuolen reunan leveys.
borderCollapse Aseta tai palauta, pitäisikö taulukon reunat sulauttaa yhdeksi reunaksi.
borderColor Aseta tai palauta elementin reunan väri (enintään neljä arvoa).
borderImage Lyhyt muoto kaikkien borderImage-ominaisuuksien asettamiseksi tai palauttamiseksi.
borderImageOutset Aseta tai palauta, kuinka paljon reunan kuvan alue ylittää reunan boxin.
borderImageRepeat Aseta tai palauta, pitäisikö kuvan reunan toistaa, ympäröi tai venyttää.
borderImageSlice Aseta tai palauta kuvan reunan sisäinen siirtymä.
borderImageSource Aseta tai palauta reunan kuvana käytettävä kuva.
borderImageWidth Aseta tai palauta kuvan reunan leveys.
borderLeft Aseta tai palauta kaikki borderLeft-ominaisuudet yhdessä lauseessa.
borderLeftColor Aseta tai palauta vasemman reunan väri.
borderLeftStyle Aseta tai palauta vasemman reunan tyyli.
borderLeftWidth Aseta tai palauta vasemman reunan leveys.
borderRadius Lyhyt muoto kaikkien neljän borderRadius-ominaisuuden asettamiseksi tai palauttamiseksi.
borderRight Aseta tai palauta kaikki borderRight-ominaisuudet yhdessä lauseessa.
borderRightColor Aseta tai palauta oikean reunan väri.
borderRightStyle Aseta tai palauta oikean reunan tyyli.
borderRightWidth Aseta tai palauta oikean reunan leveys.
borderSpacing Aseta tai palauta solujen välinen tila taulukossa.
borderStyle Aseta tai palauta elementin reunan tyyli (vihdoinkin neljä arvoa).
borderTop Aseta tai palauta kaikki borderTop ominaisuudet yhdessä lauseessa.
borderTopColor Aseta tai palauta yläreunan väri.
borderTopLeftRadius Aseta tai palauta vasemman yläkulman reunan muoto.
borderTopRightRadius Aseta tai palauta oikean yläkulman reunan muoto.
borderTopStyle Aseta tai palauta yläreunan tyyli.
borderTopWidth Aseta tai palauta yläreunan leveys.
borderWidth Aseta tai palauta elementin reunan leveys (vihdoinkin neljä arvoa).
bottom Aseta tai palauta sijoitetun elementin alareunan sijainti.
boxDecorationBreak Aseta tai palauta elementin taustan ja reunan käyttäytyminen sivutusvaiheessa, tai riveittämisessä sisäkkäisten elementtien osalta.
boxShadow Lisää yksi tai useampi varjo kehään (box).
boxSizing Mahdollistaa määrittää tietyt elementit sopimaan tietyllä tavalla tiettyyn alueeseen.
captionSide Aseta tai palauta taulukon otsikon sijainti.
caretColor Aseta tai palauta elementin lisäysviivan/kursorin väri.
clear Aseta tai palauta elementin sijainti suhteessa pyörivään objektiin.
clip Aseta tai palauta, minkä osan sijoitettua elementtiä näkyy.
color Aseta tai palauta tekstin väri.
columnCount Aseta tai palauta elementin tulisi jaottaa montako saraketta.
columnFill Aseta tai palauta, miten sarakkeet täytetään.
columnGap Aseta tai palauta sarakkeiden välinen aukko.
columnRule Lyhyt muoto asettaa tai palauttaa kaikki columnRule ominaisuudet.
columnRuleColor Aseta tai palauta sarakkeiden välisen säännön väri.
columnRuleStyle Aseta tai palauta sarakkeiden välisen säännön tyyli.
columnRuleWidth Aseta tai palauta sarakkeiden välisen säännön leveys.
columns Lyhyt muoto asettaa tai palauttaa columnWidth ja columnCount ominaisuudet.
columnSpan Aseta tai palauta elementin tulisi kattaa montako saraketta.
columnWidth Aseta tai palauta sarakkeen leveys.
content Käytetään yhdessä :before ja :after-epäoliosien kanssa, lisätään luotua sisältöä.
counterIncrement Lisää yksi tai useita laskureita.
counterReset Luo tai nollaa yksi tai useita laskureita.
cursor Aseta tai palauta hiiren osoittimen näyttämä kursorityyppi.
direction Aseta tai palauta tekstin suunta.
display Aseta tai palauta elementin näyttötyyppi.
emptyCells Aseta tai palauta, näytetäänkö tyhjien solujen reunat ja tausta.
filter Aseta tai palauta kuvan suodatin (visuaaliset vaikutukset, kuten sumeus ja satasuhde).
flex Aseta tai palauta kohteen pituus, suhteessa muihin osiin.
flexBasis Aseta tai palauta joustavan kohteen alkuperäinen pituus.
flexDirection Aseta tai palauta joustavan kohteen suunta.
flexFlow flexDirection ja flexWrap -ominaisuuksien lyhennetty muoto.
flexGrow Aseta tai palauta, kuinka kohta kasvaa muiden kohtien suhteen.
flexShrink Aseta tai palauta, miten kohta supistuu muiden kohtien suhteen.
flexWrap Aseta tai palauta, tuliko joustava kohta uudelle riville.
cssFloat Aseta tai palauta elementin horisontaalinen tasaus.
font Aseta tai palauta fonttiasetukset yhdessä lauseessa.
fontFamily Aseta tai palauta tekstin kirjasinkerta.
fontSize Aseta tai palauta tekstin kirjasinkoko.
fontStyle Aseta tai palauta, onko kirjasintyyli normal, kursiivi vai vinokirjaiminen.
fontVariant Aseta tai palauta, tuliko kirjasin pieninä isokirjaimina.
fontWeight Aseta tai palauta kirjasimen paksuus.
fontSizeAdjust Pitää tekstin luettavuuden yllä, kun fontti palauttaa.
fontStretch Valitse joustavuuden muotoonmuuntotapa kirjasinkerroksesta.
hangingPunctuation Määritä, voidaanko pisteet sijoittaa riviruudun ulkopuolelle.
height Aseta tai palauta elementin korkeus.
hyphens Aseta, miten sanat jaetaan, jotta luvun asettelu paranee.
icon Antaa kirjoittajalle mahdollisuuden käyttää symbolisia ekvivalentteja elementin tyylittämiseen.
imageOrientation Määritä, mihin suuntaan käyttäjäagentti pyörittää kuvaa oikealle tai myötäpäivään.
isolation Määritä, onko elementti pakotettu luomaan uutta sijoitettua sisältöä.
justifyContent Kun projekti ei käytä kaikkea saatavilla olevaa tilaa, aseta tai palauta joustavassa konteissa olevien projektien välinen tasaus.
vasen Aseta tai palauta sijainnillisen elementin vasen sijainti.
letterSpacing Asetetaan tai palautetaan tekstin kirjainten väliset aukot.
lineHeight Asetetaan tai palautetaan tekstin riviä jakavien etäisyyksien korkeus.
listStyle Asetetaan tai palautetaan luettelo-tyyli yhdessä lauseessa.
listStyleImage Asetetaan tai palautetaan kuva luettelon kohteen merkinnänä.
listStylePosition Asetetaan tai palautetaan luettelon kohteen merkinnän sijainti.
listStyleType Asetetaan tai palautetaan luettelon kohteen merkinnän tyyppi.
margin Asetetaan tai palautetaan elementin ulkoreunat (vähintään neljä arvoa).
marginBottom Asetetaan tai palautetaan elementin alauljen etäisyys.
marginLeft Asetetaan tai palautetaan elementin vasenüljen etäisyys.
marginRight Asetetaan tai palautetaan elementin oikeaüljen etäisyys.
marginTop Asetetaan tai palautetaan elementin yläüljen etäisyys.
maxHeight Asetetaan tai palautetaan elementin enimmäiskorkeus.
maxWidth Asetetaan tai palautetaan elementin enimmäisleveys.
minHeight Asetetaan tai palautetaan elementin vähimmäiskorkeus.
minWidth Asetetaan tai palautetaan elementin vähimmäisleveys.
navDown Asetetaan tai palautetaan navigointiasento, joka käytetään alas-näppäimistön nuolinäppäimellä.
navIndex Asetetaan tai palautetaan elementin siirtymisjärjestys.
navLeft Asetetaan tai palautetaan navigointiasento, joka käytetään vasemmalle-näppäimistön nuolinäppäimellä.
navRight Asetetaan tai palautetaan navigointiasento, joka käytetään oikealle-näppäimistön nuolinäppäimellä.
navUp Asetetaan tai palautetaan navigointiasento, joka käytetään ylös-näppäimistön nuolinäppäimellä.
objectFit Määritellään, miten korvattavan elementin sisältö sopii kehysalueeseen, joka on määritelty sen käyttämän korkeuden ja leveyden perusteella.
objectPosition Määritellään korvattavan elementin kohdistus tapauksessa, jossa se esitetään sen kehysalueessa.
opacity Asetetaan tai palautetaan elementin läpinäkyvyysaste.
order Asetetaan tai palautetaan joustavan elementin järjestys muiden elementtien suhteen.
orphans Asetetaan tai palautetaan elementin sisällä tapahtuvan sivutusprosessin aikana elementin, joka täytyy pysyä sivun alareunalla, vähimmäisriviä.
outline Asetetaan tai palautetaan kaikki outline-ominaisuudet yhdessä lauseessa.
outlineColor Asetetaan tai palautetaan elementin ympärillä olevan reunan väri.
outlineOffset Siirretään reunaa ja piirretään se reunan ulkopuolelle.
outlineStyle Asetetaan tai palautetaan elementin ympärillä olevan reunan tyyli.
outlineWidth Asetetaan tai palautetaan elementin ympärillä olevan reunan leveys.
overflow Asetetaan tai palautetaan, miten käsitellään sisältöä, joka esitetään elementin kehysalueen ulkopuolella.
overflowX Määritellään, miten käsitellään sisällön vasemman- tai oikean reunan ylitystä, jos se ylittää elementin sisällön alueen.
overflowY Määritä, miten käsitellään sisällön ylä- ja alarajojen reunat, jos ne ylittävät elementin sisällön alueen.
padding Aseta tai palauta elementin sisennyksen asetukset (korkeintaan neljä arvoa).
paddingBottom Aseta tai palauta elementin alasisennyksen asetukset.
paddingLeft Aseta tai palauta elementin vasemman sisennyksen asetukset.
paddingRight Aseta tai palauta elementin oikean sisennyksen asetukset.
paddingTop Aseta tai palauta elementin yläsisennyksen asetukset.
pageBreakAfter Aseta tai palauta elementin takana olevan sivutus行为的 asetukset.
pageBreakBefore Aseta tai palauta elementin edessä olevan sivutus行为的 asetukset.
pageBreakInside Aseta tai palauta elementin sisäisen sivutus行为的 asetukset.
perspective Aseta tai palauta, miten 3D-elementtiä tarkastellaan.
perspectiveOrigin Aseta tai palauta 3D-elementin pohjan sijainti.
position Aseta tai palauta elementin sijoitusmenetelmän tyyppi (statiikka, suhteellinen, absoluutti tai kiinteä).
quotes Aseta tai palauta sisennetyn lainauksen lainausmerkkityyppi.
resize Aseta tai palauta, voidaanko elementtiä käyttäjän toimesta venyttää.
right Aseta tai palauta sijoitetun elementin oikea sijainti.
scrollBehavior Määritä, onko pehmeää liikkuvuutta säädetty, kun käyttäjä napsauttaa liukukäytävässä olevaa linkkiä, eikä se hypy suoraan.
tableLayout Aseta tai palauta taulukkomuurin, rivi- ja sarakeasettelun tyyli.
tabSize Aseta tai palauta tabulaattorin pituus.
textAlign Aseta tai palauta tekstin horisontaalinen kohdistus.
textAlignLast Kun "text-align": "justify", aseta tai palauta, miten viimeinen rivi tai pakottava rivinvaihto kohdistetaan.
textDecoration Aseta tai palauta tekstin koristeet.
textDecorationColor Aseta tai palauta tekstin koristeellisen väri.
textDecorationLine Aseta tai palauta tekstin koristeellisen rivin tyyppi.
textDecorationStyle Aseta tai palauta tekstin koristeellisen viivan tyyli.
textIndent Aseta tai palauta ensimmäisen rivin tekstin sisennys.
textJustify Aseta tai palauta "text-align": "justify" -tyyppisen kohdistuksen käyttämä menetelmä.
textOverflow Aseta tai palauta se, mitä tapahtuu, kun teksti ylittää sisältävän elementin.
textShadow Aseta tai palauta tekstin varjotehostus.
textTransform Aseta tai palauta tekstin suuruus kirjainmuodossa.
top Aseta tai palauta sijoitetun elementin ylätason sijainti.
transform Sovita 2D- tai 3D-muunnos elementtiin.
transformOrigin Aseta tai palauta muunnoksen elementin sijainti.
transformStyle Aseta tai palauta sisäkkäisten elementtien 3D-tilassa oleva renderöintitapa.
transition Lyhyt muoto, jota käytetään asettamaan tai palauttamaan neljä muunnosominaisuutta.
transitionProperty Aseta tai palauta过渡效果 transitionEffect CSS-ominaisuudet.
transitionDuration Aseta tai palauta过渡效果 transitionEffect kesto sekunneissa tai millisekunneissa.
transitionTimingFunction Aseta tai palauta过渡效果 transitionEffect nopeuskaava.
transitionDelay Aseta tai palauta, milloin过渡效果 transitionEffect alkaa.
unicodeBidi Aseta tai palauta, tulisiko tekstiä peittää tukemaan useita kieliä samassa dokumentissa.
userSelect Aseta tai palauta, voidaanko elementin tekstiä valita.
verticalAlign Aseta tai palauta elementin sisällön pystysuuntainen tasaus.
visibility Aseta tai palauta elementin näkyvyys.
whiteSpace Aseta tai palauta, miten tabulaattorit, rivinvaihdot ja välilyönnit käsitellään tekstissä.
width Aseta tai palauta elementin leveys.
wordBreak Aseta tai palauta ei-CJK-kielten rivinvaihdon säännöt.
wordSpacing Aseta tai palauta tekstin välit.
wordWrap Salli pitkien, katkaisemattomien sanojen katkaiseminen ja siirtäminen seuraavaan riviin.
widows Aseta tai palauta elementin, joka näkyy sivun ylimmässä osassa, minimimäärä rivejä.
zIndex Aseta tai palauta sijoitetun elementin pinnan järjestys.

Tarkista Style-objekti

Tyyliobjekti voidaan hakea dokumentin otsiosta tai erityisestä HTML-elementistä.

Esimerkki 1

Tarkista tyyliobjekti dokumentin otsiossa:

var x = document.getElementsByTagName("STYLE");

Kokeile itse

Esimerkki 2

Käy säännöllisesti tarkistamassa määritettyjen elementtien tyyliobjekti:

var x = document.getElementById("myH1").style;

Kokeile itse

Luo Style-objekti

Esimerkki 1

Voit luoda <style>-elementin käyttämällä document.createElement() -metodia:

var x = document.createElement("STYLE");

Kokeile itse

Esimerkki 2

Voit myös asettaa olemassa olevan elementin tyylejä ominaisuuksia:

document.getElementById("myH1").style.color = "red";

Kokeile itse

Liittyvät sivut

HTML oppituntti:HTML CSS

CSS oppituntti:CSS oppituntti

HTML viittaus:HTML <style> -tagi

CSS viittaus:CSS ominaisuudet