HTML ja CSS metodit
Taulukko, HTML-elementteihin ja CSS-ohjeisiin liittyvät metodit.
Taulukossa, useimmin käytetyt metodit tällä sivulla (+linkit Metodi-kohdassa) ja harvemmin käytettyjen linkit Metodin selitys-kohdassa.
| Metodi | Metodin selitys |
|---|---|
| addClass() | Lisää yhden tai useamman class-tunnisteen valittuun HTML-elementtiin |
| after() | Lisää sisältöä valitun HTML-elementin jälkeen, esim alapuolelle |
| append() | Lisää HTML-elementin valitun HTML-elementin jälkeen tai alapuolelle |
| appendTo() | Lisää HTML-elementin valittujen HTML-elementtien jälkeen |
| attr() | Asettaa tai palauttaa valitun elementin atribuutit tai arvot |
| before() | Lisää sisällön ennen valittua elementtiä, esimerkiksi elementin eteen |
| clone() | Kopioi valitun elementin |
| css() | Asettaa tai palauttaa yhden tai useamman CSS-ohjeen valitulle elementille tai elementistä |
| detach() | Siirtää valitun elementin, säilyttää datan ja asetetun tapahtuman (event) |
| empty() | Siirtää valitun elementin kaikki alasolut ja sisällön |
| hasClass() | Tarkistaa minkä tahansa elementin onko sillä class-tunniste |
| height() | Asettaa tai palauttaa elementin korkeuden |
| html() | Asettaa tai palauttaa elementin sisällön |
| innerHeight() | Palauttaa tietona elementin korkeuden (mukaan lukien täyte, ei viivaa) |
| innerWidth() | Palauttaa tietona elementin leveyden (mukaan lukien täyte, ei viivaa) |
| insertAfter() | Lisää HTML-elementin valitun elementin jälkeen |
| insertBefore() | Lisää HTML-elementin valitun elementin eteen (KATSO edellinen insertAfter) |
| offset() | Asettaa tai palauttaa valitun elementin sijainnin koordinaatit (vasen yläkulma, suhteellinen arvo) |
| offsetParent() | Palauttaa sille elementille arvon minkä sisässä valittu elementti on (?) |
| outerHeight() | Palauttaa elementin korkeuden (sisältää täytteen ja viivan arvot) |
| outerWidth() | Palauttaa elementin leveyden (sisältää täytteen ja viivan arvot) |
| position() | Palauttaa elementin sijainnin, suhteellinen sijainti elementiin jonka sisällä valittu elementti on |
| prepend() | Lisää sisältöä valitun elementin alkuun tai eteen |
| prependTo() | Lisää HTML-elementin valitun elementin alkuun tai eteen |
| prop() | Asettaa tai palauttaa asetukset tai alueet valitusta elementistä (yhdessä removeProp() metodilla) |
| remove() | Siirtää valitun elementin (sisältää elementin datat ja tapahtumat) |
| removeAttr() | Siirtää valitun elementin yhden tai useamman atribuutin |
| removeClass() | Siirtää valitun elementin yhden tai useamman class-tunnisteet (esim poistaa muotoilut) |
| removeProp() | Siirtää asetukset yhdessä prop() metodin kanssa (?) (KATSO prop-esimerkki) |
| replaceAll() | Korvaa valitun elementin uudella HTML-elementtillä |
| replaceWith() | Asettaa tai palauttaa valitun elementin sijainnin vaaka-suunnassa, horisontaali |
| scrollTop() | Asettaa tai palauttaa valitun elementin sijainnin pysty-suunnassa, vertikaali (KATSO esimerkki scrollLeft) |
| text() | Asettaa tai palauttaa teksti-sisällön valitusta elementistä |
| toggleClass() | Vaihtaa lisäämällä tai siirtämällä yhden tai useamman class-tunnisteet valitusta elementistä |
| unwrap() | Siirtää valitun elementin "ulompaan" elementiin ?? |
| val() | Asettaa tai palauttaa atribuutit valittuun elementtiin (form-elementti esim) |
| width() | Asettaa tai palauttaa valitun elementin leveyden |
| wrap() | Asettaa HTML-elementin valitulle elementille , esim lisää muotoilun |
| wrapAll() | Asettaa HTML-elementin valituille elementeille, esim lisää muotoilun |
| wrapInner() | Asettaa HTML-elementin tai -elementit kaikille valitun elementin sisällöille |
OTA SISÄLTÖ
Esimerkissä painikkeilla näytetään alert-funktiossa joko teksti tai teksti sekä siinä käytetyt HTML-elementit:
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"> </script>
<script>
$(document).ready(function(){
$("#btn1").click(function(){
alert("Teksti (id-tunniste): " + $("#test").text());
});
$("#btn2").click(function(){
alert("Teksti ja sen HTML-elementit: " + $("#test").html());
});
});
</script>
</head>
< body>
<p id="test"><span>Teksti on span-elementissä ja
<i>tämä on kursivoitu</i> teksti.</span></p>
<button id="btn1"> Näytä teksti </button>
<button id="btn2"> Näytä teksti ja sen HTML-elementit </button>
</body>
</html>
Tulos www-sivulla:
val() - metodi
Esimerkki, val()-metodilla näytetään alert-ilmoituksessa lomake-kentässä oleva teksti. Jos kenttään ei ole kirjoitettu mitään, näytetään lomake-kentän HTML-koodauksessa olevan value:n teksti, jos kenttään on kirjoitettu näytetään tämä kirjoitettu teksti.
Script head-elementissä:
<script>
$(document).ready(function(){
$("button").click(function(){
alert("Lomake-kentän teksti: " + $("#testi").val());
});
});
</script>
HTML-koodaus:
<p>Osoite: <input type="text" id="testi" value= "Kirjoita osoitteesi" ></p>
<button class="button"> Näytä value-asetuksen teksti </button>
Tulos www-sivulla:
attr() - metodi
Esimerkissä näytetään a-elementin href-linkkiin atribuutiksi asetettu www-osoite.
Script head-elementissä:
<script>
$(document).ready(function(){
$("button").click(function(){
alert($("#osoite").attr("href"));
});
});
</script>
HTML-koodaus:
<p><a href="https://areena.yle.fi/tv" id="osoite"> Yle Areena </a></p>
<button class="button"> Näytä linkin www-osoite </button>
Tulos www-sivulla:
ASETA SISÄLTÖ, text(), html() ja val()
Esimerkeissä asetetaan www-sivulle sisältö kolmelle elementille tai korvaa olemassa olevan tekstin.
- text() - asettaa p-elementissä olevan tekstin tilalle uuden tekstin.
- html() - asettaa tyhjään p-elementiin tekstin (p-elementti ei näkyvillä alussa).
- val() - asettaa tyhjään lomake-kentään tekstin esille.
Script head-elementissä:
<script>
$(document).ready(function(){
$("#btn1").click(function(){
$("#testi1").text("Tekstiä JQuery:llä.");
});
$("#btn2").click(function(){
$("#testi2").html("<b>HTML:n b-elementissä oleva teksti.</b>");
});
$("#btn3").click(function(){
$("#testi3").val("Osoite-tieto ?");
});
});
</script>
HTML-koodaus:
<p id="testi1" class="vari"> Tämä teksti vaihtuu ! </p>
<p id="testi2" class="vari"> </p>
<p>Osoite: <input type="text" id="testi3" value="" class="vari"> </p>
<button id="btn1" class="button"> Näytä teksti </button>
<button id="btn2" class="button"> Aseta teksti HTML-elementillä </button>
<button id="btn3" class="button"> Aseta lomake-kenttään oletusteksti</button>
Tulos www-sivulla:
TÄHÄN LISÄÄ ESIMERKKEJÄ TULOSSA !!
LISÄÄ SISÄLTÖÄ
Lisää-metodeilla voidaan lisätä www-sivulle sivulla sisältöä. Esimerkiksi tekstiä joka ei ole näkyvissä sivun auetessa selaimessa. Lisää-metodeita ovat seuraavat:
- append() - Lisää sisällön valittujen elementtien loppuun.
- prepend()- Lisää sisällön valittujen elementtien alkuun.
- after() - Lisää sisällön valittujen elementtien jälkeen.
- before() - Lisää sisällön ennen valittuja elementtejä.
append() - lisää loppuun
Esimerkissä painikkeilla lisätään teksti olemassa olevan LOPPUUN tai listan LOPPUUN uusi listan teksti:
Script head-elementissä:
<script>
$(document).ready(function(){
$("#btn1").click(function(){
$("p").append("<b> Lisätty teksti. </b>");
});
$("#btn2").click(function(){
$("ol").append("<li><b> Kirsikka </b></li>");
});
});
</script>
HTML-koodaus:
<p>Alkuperäinen teksti.</p>
<p>Alkuperäinen teksti.</p>
<ol>
<li> Omena </li>
<li> Päärynä </li>
</ol>
<button id="btn1"> Lisää teksti loppuun </button>
<button id="btn2"> Lisää listan loppuun </button>
Tulos www-sivulla:
prepend() - lisää alkuun
Esimerkissä painikkeilla lisätään teksti olemassa olevan ALKUUN tai listan ALKUUN uusi listan teksti:
Script head-elementissä:
<script>
$(document).ready(function(){
$("#btn1").click(function(){
$("p").prepend("<span id='vari'> Alkuun uusi teksti.</span>");
});
$("#btn2").click(function(){
$("ol").prepend("<li><b> Audi </b></li>");
});
});
</script>
HTML-koodaus:
<p>Alkuperäinen teksti.</p>
<ol>
<li> Bentley </li>
<li> Citroen </li>
</ol>
<button id="btn1" class="button"> Lisää teksti alkuun </button>
<button id="btn2" class="button"> Lisää listan alkuun </button>
Tulos www-sivulla:
before() ja after() - lisää eteen tai loppuun
Esimerkissä painikkeilla lisätään teksti kuvan eteen tai jälkeen:
Script head-elementissä:
<script>
$(document).ready(function(){
$("#btn1").click(function(){
$("img").before("<b class='vari'> EDESSÄ </b>");
});
$("#btn2").click(function(){
$("img").after("<b class='vari'> Jälkeen</b>");
});
});
</script>
HTML-koodaus:
<img src="pallo.jpg" alt="maapallo" width="100" height="140"><br><br>
<button id="btn1" class="button"> Lisää eteen </button>
<button id="btn2" class="button"> Lisää jälkeen </button>
Tulos www-sivulla:
SIIRRÄ elementti tai sisältö
Elementtien ja sisällön siirtämiseen eli poistamiseen on pääasiassa kaksi jQuery-metodia:
- remove() - Siirrä valittu elementti (ja siirrettävän sisällä olevat alielementit)
- empty() - Poistaa alielementit valitusta elementistä (poistaa valitus elementin sisältä)
Siirrä kaikki, remove()
Esimerkissä painikkeella poistetaan painikkeen yläpuolelta id-tunnisteinen teksti-kehys ja sen teksti:
Script head-elementissä:
<script>
$(document).ready(function(){
$("button").click(function(){
$("#poista").remove();
});
});
</script>
HTML-koodaus:
<div id="poista">
<p>Esimerkin teksti-laatikko CSS-ohje on liitetty id:lla.<br>
Myös JQuery:ssä käytetään id:ssä samaa <b>poista</b>-nimistä tunnistetta.</p>
</div>
<button class="button"> Poista teksti-kehys ja teksti </button>
Tulos www-sivulla:
Metodilla remove voidaan poistaa myös eri tunnisteisia html-elementtejä:
remove(".testi, .demo");- poistaa elementit joilla on class-tunniste testi tai demoremove(".oma, #nimi");- poistaa elementit joilla on class-tunniste oma tai id-tunniste nimi
Esimerkissä remove-motdilla poistetaan ne elementit joilla on class-tunnisteena osa:
Script head-elementissä:
<script>
$(document).ready(function(){
$("button").click(function(){
$("p").remove(".osa");
});
});
</script>
HTML-koodaus:
<div id="poksi">
<p>Esimerkissä painikkeella poistetaan p-elementtejä joiden tunniste on <b>osa</b>.</p>
<p class="osa">Poista tämä painikkeella.</p>
<p>Tällä tekstillä ei ole osa-tunnistetta</p>
<p class="osa">Poista tämä painikkeella.</p>
<button class="button"> Poista tekstiä </button>
</div>
Tulos www-sivulla:
Poista alielementit, empty()
Painikkeen klikkaus poistaa elementin sisällä olevat alielementit:
Script head-elementissä:
<script>
$(document).ready(function(){
$("button").click(function(){
$("#poista").empty();
});
});
</script>
HTML-koodaus:
<div id="poista">
<p>Esimerkin teksti-laatikko CSS-ohje on liitetty id:lla.<br>
Myös JQuery:ssä käytetään id:ssä samaa <b>poista</b>-nimistä tunnistetta.<p>
<p><ins>Poista laatikon teksti</ins> klikkaamalla painiketta. </p>
</div>
<button class="button"> Poista teksti </button>
Tulos www-sivulla:
CSS-LUOKAT addClass(), removeClass(), toggleClass()
jQuerylla on useita menetelmiä CSS-käsittelyyn, alla CSS-luokkiin liittyvät:
addClass()- Lisää yhden tai useamman luokan valittuihin elementteihinremoveClass()- Poistaa yhden tai useamman luokan valituista elementeistätoggleClass()- Luokkien lisääminen/poistaminen valituista elementeistäcss()- Asettaa tai palauttaa tyylimääritteen (oma osa oppaassa)
Alla esimerkissä muutetaan painikkeella sivun elementtien CSS-ohjeita:
Script head-elementissä:
<script>
$(document).ready(function(){
$("button").click(function(){
$("h2, h3, p").addClass("sini");
$("div").addClass("important");
$("h4").removeClass("vari");
$("h3").toggleClass("oranssi");
});
});
</script>
HTML-koodaus:
<h2> Otsikko 1 </h2>
<h3> Otsikko 2 </h3>
<h4 class="vari">h4-otsikko</h4>
<p> Tekstiä p-elementillä. </p>
<div> Tärkeää! Tämä on div-elementissä tekstiä. </div><br>
<button class="button"> Vaihda </button>
<h3 class="oranssi"> Klikkaa vielä uudelleen </h3>
CSS-ohjeet (style-elementtiin);
.important {
font-weight: bold;
font-size: xx-large;
}
.sini {color: blue;}
.vari{color:RED;}
.oranssi{color:orange;}
Tulos www-sivulla, huomaa muutokset klikatessa sekä uudelleen klikatessa:
CSS css()
Alla css-metodin periaatteet:
- css("CSS-ohje"); - CSS-ohje esimerkiksi color, font-family
- css("CSS-ohje","asetus"); - asetus esimerkiksi RED, RGB(12,45.100), Arial, sans-serif
- css({"CSS-ohje":"asetus",CSS-ohje":"asetus",...}); - useampi ohje ja asetus
Esimerkki. Koodaus joka näyttää id-tunnisteella valitun elementin taustavärin koodin:
Script head-elementissä:
<script>
$(document).ready(function(){
$("button").click(function(){
alert("Taustaväri = " + $("#toka").css("background-color"));
});
});
</script>
HTML-koodaus:
<p style="background-color:#ff0000"> 1. p-elementti. </p>
<p style="background-color:#00ff00" id="toka"> 2. p-elementti. </p>
<p style="background-color: Orange"> 3. p-elementti. </p>
<button class="button"> Näytä </button>
Esimerkin koodaus näyttää keskimmäisen p-elementin taustavärin RGB-koodin:
Esimerkin koodaus asettaa kaikkille p-elementeille taustavärin:
Script head-elementissä:
<script>
$(document).ready(function(){
$("button").click(function(){
$("p").css("background-color", "yellow");
});
});
</script>
HTML-koodaus:
<p style="background-color:CYAN"> 1. p-elementti. </p>
<p style="background-color:Tomato"> 2. p-elementti. </p>
<p style="background-color:Orange"> 3. p-elementti. </p>
<p> 4. p-elementti. </p>
<button class="button"> Aseta taustaväri </button>
<p> Esimerkissä painikkella vaihdetaan taustavärit sekä jos elementillä ei ole taustaväriä
sille lisätään taustaväri. </p>
Esimerkin koodaus vaihtaa tekstien taustavärin:
Esimerkin koodaus asettaa kaksi CSS-ohjetta p-elementeille sekä painikkeen alapuolelle eri CSS-ohjeen:
Script head-elementissä:
<script>
$("p").css({"background-color": "yellow", "font-size": "130%"});
$("#muuta").css({"background-color": "cyan", "font-size": "110%"});
</script>
HTML-koodaus:
<p style="background-color:#ff0000">1. p-elementti.<
<p style="background-color:#00ff00">2. p-elementti.<
<p style="background-color:#0000ff">3. p-elementti.</p>
<p>4. p-elementti.</p>
<button class="button">Vaihda p-elementtien CSS-ohjeet</button>
<p id="muuta">Painikkeella vaihdetaan ja asetetaan <b>www-sivun kaikille p-elementeille</b> kaksi CSS-ohjetta.
Huomaa. "p" -asetuksen sijaan voi käyttää id- tai class-tunnistetta</p>
Esimerkin koodaus näyttää keskimmäisen p-elementin taustavärin RGB-koodin:
ELEMENTIN KOON JA MITTOJEN SELVITTÄMINEN
Kuva. Mittojen selvittämisessä käytettävät metodit sekä niiden merkitys suhteessa div-elementiin.
Alla width- ja height-metodien periaatteet:
- $("#div1").width() - jossa #div1-tutkittava elementti
- $("#div1").height(); - jossa #div1-tutkittava elementti
Esimerkki. Koodaus näyttää div-elementin sisällön mitat pikseleinä:
Script head-elementissä:
<script>
$(document).ready(function(){
$("button").click(function(){
var txt = "";
txt += "Leveys: " + $("#div1").width() + "</br>";
txt += "Korkeus: " + $("#div1").height();
$("#div1").html(txt);
});
});
</script>
HTML-koodaus:
<div id="div1"> <<
<button> Näytä div:n mitat </button>
div-elementin CSS-ohje:
#div1 {
height: 100px;
width: 300px;
padding: 10px;
margin: 3px;
border: 1px solid #990000;
background-color: #FFE8E3;
}
Esimerkin koodaus näyttää keskimmäisen p-elementin taustavärin RGB-koodin:
Alla innerWidth- ja innerHeight-metodien periaatteet:
- $("#div1").innerWidth() - div1-elementin leveys, sisältää padding-asetuksen
- $("#div1").innerHeight(); - div1-elementin korkeus, sisältää padding-asetuksen
Esimerkki. Koodaus näyttää div-elementin sisällön ja sisä mitat pikseleinä:
Script head-elementissä:
<script>
$(document).ready(function(){
$("button").click(function(){
var txt = "";
txt += "Sisällön leveys: " + $("#div1").width() + "</br>";
txt += "Sisällön korkeus: " + $("#div1").height() + "</br>";
txt += "Box:in sisä leveys: " + $("#div1").innerWidth() + "</br>";
txt += "Box:in sisä korkeus: " + $("#div1").innerHeight();
$("#div1").html(txt);
});
});
</script>
HTML-koodaus:
<div id="div1"> <<
<button> Näytä mitat </button>
div-elementin CSS-ohje:
#div1 {
height: 100px;
width: 300px;
padding: 10px;
margin: 3px;
border: 5px solid #990000;
background-color: #FFE8E3;
}
Esimerkin koodaus näyttää keskimmäisen p-elementin taustavärin RGB-koodin:
Alla outerWidth- ja outerHeight-metodien periaatteet:
- $("#div1").outerWidth() - div1:n leveys, sisältää padding-asetuksen sekä viivan leveyden
- $("#div1").outerHeight(); - div1:n korkeus, sisältää padding-asetuksen sekä viivan korkeuden
Esimerkki. Koodaus näyttää div-elementin koon pikseleinä:
Script head-elementissä:
<script>
$(document).ready(function(){
$("button").click(function(){
var txt = "";
txt += "Sisällön leveys: " + $("#div1").width() + "</br>";
txt += "Sisällön korkeus: " + $("#div1").height() + "</br>";
txt += "Ulkopuolinen leveys: " + $("#div1").outerWidth() + "</br>";
txt += "Ulkopuolinen korkeus: " + $("#div1").outerHeight();
$("#div1").html(txt);
});
});
</script>
HTML-koodaus:
<div id="div1"> <<
<button> Näytä mitat </button>
div-elementin CSS-ohje:
#div1 {
height: 100px;
width: 300px;
padding: 10px;
margin: 3px;
border: 5px solid #990000;
background-color: #FFE8E3;
}
Esimerkki näyttää sisällön sekä div:n ulko mitat :
Alla outerWidth- ja outerHeight-metodit true-määritteellä:
- $("#div1").outerWidth(true) - div1:n leveys, sisältää myös div ulkopuolelta marginaalin
- $("#div1").outerHeight(true); - div1:n korkeus, sisältää myös div ulkopuolelta marginaalin
Koodaus, div:n koko www-sivulla:
Script head-elementissä:
<script>
$(document).ready(function(){
$("button").click(function(){
var txt = "";
txt += "Sisällön leveys: " + $("#div1").width() + "</br>";
txt += "Sisällön korkeus: " + $("#div1").height() + "</br>";
txt += "Ulkopuolinen leveys: " + $("#div1").outerWidth(true) + "</br>";
txt += "Ulkopuolinen korkeus: " + $("#div1").outerHeight(true);
$("#div1").html(txt);
});
});
</script>
HTML-koodaus:
<div id="div1"> <<
<button> Näytä mitat </button>
div-elementin CSS-ohje:
#div1 {
height: 100px;
width: 300px;
padding: 10px;
margin: 3px;
border: 5px solid #990000;
background-color: #FFE8E3;
}
Esimerkki näyttää div:n kokonais koon mukaan lukien ulkopuolen marginaalit:
Alla document ja window asetusten vaikutus.
Koodaus, div:n koko www-sivulla:
Script head-elementissä:
<script>
$(document).ready(function(){
$("button").click(function(){
var txt = "";
txt += "Dokumentin leveys/korkeus: " + $(document).width();
txt += "x" + $(document).height() + "\n";
txt += "Selaimen näkymän leveys/korkeus: " + $(window).width();
txt += "x" + $(window).height();
alert(txt);
});
});
</script>
HTML-koodaus:
<div id="div1"> <<
<button> Näytä mitat </button>
Esimerkki näyttää selaimen sisällön koon, kokeile pienentämällä selaimen koko uudelleen:
Huomaa. Esimerkki on toteutettu kokonaiseksi www-sivuna joka avataan iframe-elementiin oppaassa.
Kokeile miten mitat muuttuu omalla testi-tiedostolla.
Leveyden ja korkeuden muuttaminen asetuksilla.
Metodeilla width ja height voidaan muuttaa elementin kokoa antamalla niihin uusi koko.
Koodaus, div:n koko www-sivulla:
Script head-elementissä:
<script>
$(document).ready(function(){
$("button").click(function(){
$("#div1").width(350).height(200);
});
});
</script>
HTML-koodaus:
<div id="div1"></div> <br>
<button> Muuta div:in kokoa </button>
Esimerkki näyttää selaimen sisällön koon, kokeile pienentämällä selaimen koko uudelleen: