Příklady HTML objektů JavaScriptu

Obsah

Příklady použití JavaScriptu pro přístup a manipulaci s HTML objekty.

Ukotvení objektu

Najděte hodnotu atributu href odkazu

<!DOCTYPE html>
<html>
<body>

<p><a id="myAnchor" href="https://www.w3schools.com/">W3Schools</a></p>

<p>Click the button to display the value of the href attribute of the link above.</p>

<button onclick="myFunction()">Try it</button>

<p id="demo"></p>

<script>
function myFunction() {
  var x = document.getElementById("myAnchor").href;
  document.getElementById("demo").innerHTML = x;
}
</script>

</body>
</html>

Najděte hodnotu atributu hreflang odkazu

<!DOCTYPE html>
<html>
<body>

<p><a id="myAnchor" hreflang="en-us" href="https://www.w3schools.com/">W3Schools</a></p>

<p>Click the button to display the value of the hreflang attribute of the link above.</p>

<button onclick="myFunction()">Try it</button>

<p id="demo"></p>

<script>
function myFunction() {
  var x = document.getElementById("myAnchor").hreflang;
  document.getElementById("demo").innerHTML = x;
}
</script>

</body>
</html>

Najděte hodnotu atributu id odkaz

<!DOCTYPE html>
<html>
<body>

<p><a id="myAnchor" href="https://www.w3schools.com/">W3Schools</a></p>

<p>Click the button to display the value of the id attribute of the link above.</p>

<button onclick="myFunction()">Try it</button>

<p id="demo"></p>

<script>
function myFunction() {
  var x = document.getElementById("myAnchor").id;
  document.getElementById("demo").innerHTML = x;
}
</script>

</body>
</html>

Najděte hodnotu atributu rel odkazu

<!DOCTYPE html>
<html>
<body>

<p><a id="myAnchor" rel="nofollow" href="https://www.w3schools.com/">W3Schools</a></p>

<p>Click the button to display the value of the rel attribute of the link above.</p>

<button onclick="myFunction()">Try it</button>

<p id="demo"></p>

<script>
function myFunction() {
  var x = document.getElementById("myAnchor").rel;
  document.getElementById("demo").innerHTML = x;
}
</script>

</body>
</html>

Najděte hodnotu cílového atributu odkazu

<!DOCTYPE html>
<html>
<body>

<p><a id="w3s" target="_self" href="https://www.w3schools.com/">W3Schools</a></p>

<p>Click the button to display the value of the target attribute of the link above.</p>

<button onclick="myFunction()">Try it</button>

<p id="demo"></p>

<script>
function myFunction() {
  var x = document.getElementById("w3s").target;
  document.getElementById("demo").innerHTML = x;
}
</script>

</body>
</html>

Najděte hodnotu atributu type odkazu

<!DOCTYPE html>
<html>
<body>

<p><a id="myAnchor" type="text/html" href="https://www.w3schools.com/">W3Schools</a></p>

<p>Click the button to return the value of the type attribute of the link above.</p>

<button onclick="myFunction()">Try it</button>

<p id="demo"></p>

<script>
function myFunction() {
  var x = document.getElementById("myAnchor").type;
  document.getElementById("demo").innerHTML = x;
}
</script>

</body>
</html>

Plocha Objekt

Najděte alternativní text oblasti obrazové mapy

<!DOCTYPE html>
<html>
<body>

<img src="planets.gif" width="145" height="126" usemap="#planetmap">

<map name="planetmap">
  <area id="venus" shape="circle" coords="124,58,8" alt="A beautiful planet" href="venus.htm">
</map>

<p>Click the button to display the alternate text for the "venus" area.</p>

<button onclick="myFunction()">Try it</button>

<p id="demo"></p>

<script>
function myFunction() {
  var x = document.getElementById("venus").alt;
  document.getElementById("demo").innerHTML = x;
}
</script>

</body>
</html>

Najděte souřadnice oblasti

<!DOCTYPE html>
<html>
<body>

<img src="planets.gif" width="145" height="126" usemap="#planetmap">

<map name="planetmap">
  <area id="venus" shape="circle" coords="124,58,8" alt="Venus" href="venus.htm">
</map>

<p>Click the button to display the coordinates for the "venus" area.</p>

<button onclick="myFunction()">Try it</button>

<p id="demo"></p>

<script>
function myFunction() {
  var x = document.getElementById("venus").coords;
  document.getElementById("demo").innerHTML = x;
}
</script>

</body>
</html>

Najděte tvar oblasti

<!DOCTYPE html>
<html>
<body>

<img src="planets.gif" width="145" height="126" usemap="#planetmap">

<map name="planetmap">
  <area id="venus" shape="circle" coords="124,58,8" alt="Venus" href="venus.htm">
</map>

<p>Click the button to return the shape of the "venus" area in the image-map.</p>

<button onclick="myFunction()">Try it</button>

<p id="demo"></p>

<script>
function myFunction() {
  var x = document.getElementById("venus").shape;
  document.getElementById("demo").innerHTML = x;
}
</script>

</body>
</html>

Najděte href oblasti

<!DOCTYPE html>
<html>
<body>

<img src="planets.gif" width="145" height="126" usemap="#planetmap">

<map name="planetmap">
  <area id="venus" shape="circle" coords="124,58,8" alt="Venus" href="venus.htm">
</map>

<p>Click the button to display the value of the href attribute for the "venus" area.</p>

<button onclick="myFunction()">Try it</button>

<p id="demo"></p>

<script>
function myFunction() {
  var x = document.getElementById("venus").href;
  document.getElementById("demo").innerHTML = x;
}
</script>

</body>
</html>

Najděte protokolovou část atributu href oblasti

<!DOCTYPE html>
<html>
<body>

<img src="planets.gif" width="145" height="126" usemap="#planetmap">

<map name="planetmap">
<area id="venus" shape="circle" coords="124,58,8" alt="Venus" href="venus.htm">
</map>

<p>Click the button to display the protocol of the href attribute for the "venus" area.</p>

<button onclick="myFunction()">Try it</button>

<p id="demo"></p>

<script>
function myFunction() {
  var x = document.getElementById("venus").protocol;
  document.getElementById("demo").innerHTML = x;
}
</script>

</body>
</html>

Najděte část názvu hostitele v atributu href oblasti

<!DOCTYPE html>
<html>
<body>

<img src="planets.gif" width="145" height="126" usemap="#planetmap">

<map name="planetmap">
  <area id="venus" shape="circle" coords="124,58,8" alt="Venus" href="venus.htm">
</map>

<p>Click the button to display the hostname of the href attribute for the "venus" area.</p>

<button onclick="myFunction()">Try it</button>

<p id="demo"></p>

<script>
function myFunction() {
  var x = document.getElementById("venus").hostname;
  document.getElementById("demo").innerHTML = x;
}
</script>

</body>
</html>

Najděte část čísla portu v atributu href oblasti

<!DOCTYPE html>
<html>
<body>

<img src="planets.gif" width="145" height="126" usemap="#planetmap">

<map name="planetmap">
  <area id="venus" shape="circle" coords="124,58,8" alt="Venus" href="venus.htm">
</map>

<p>Click the button to display the port of the href attribute for the "venus" area in the image-map.</p>

<p><b>Note:</b> If the port part is not specified in the URL, or if the port number is 80 (which is default), some browsers will just display 0 or nothing.</p>

<button onclick="myFunction()">Try it</button>

<p id="demo"></p>

<script>
function myFunction() {
  var x = document.getElementById("venus").port;
  document.getElementById("demo").innerHTML = "Port: " + x;
}
</script>

</body>
</html>

Najděte část názvu cesty atributu href oblasti

<!DOCTYPE html>
<html>
<body>

<img src="planets.gif" width="145" height="126" usemap="#planetmap">

<map name="planetmap">
  <area id="venus" shape="circle" coords="124,58,8" alt="Venus" href="venus.htm">
</map>

<p>Click the button to display the pathname of the href attribute for the "venus" area in the image-map.</p>

<button onclick="myFunction()">Try it</button>

<p id="demo"></p>

<script>
function myFunction() {
  var x = document.getElementById("venus").pathname;
  document.getElementById("demo").innerHTML=x;
}
</script>

</body>
</html>

Najděte část querystring atributu href oblasti

<!DOCTYPE html>
<html>
<body>

<img src="planets.gif" width="145" height="126" usemap="#planetmap">

<map name="planetmap">
  <area id="venus" shape="circle" coords="124,58,8" alt="Venus" href="venus.htm?id=venus">
</map>

<p>Click the button to display the querystring part of the href attribute for the "venus" area.</p>

<button onclick="myFunction()">Try it</button>

<p id="demo"></p>

<script>
function myFunction() {
  var x = document.getElementById("venus").search;
  document.getElementById("demo").innerHTML = x;
}
</script>

</body>
</html>

Najděte část hash atributu href oblasti

<!DOCTYPE html>
<html>
<body>

<img src="planets.gif" width="145" height="126" usemap="#planetmap">

<map name="planetmap">
  <area id="venus" shape="circle" coords="124,58,8" alt="Venus" href="venus.htm#description">
</map>

<p>Click the button to display the anchor part of the href attribute for the "venus" area.</p>

<button onclick="myFunction()">Try it</button>

<p id="demo"></p>

<script>
function myFunction() {
  var x = document.getElementById("venus").hash;
  document.getElementById("demo").innerHTML = x;
}
</script>

</body>
</html>

Najděte hodnotu cílového atributu oblasti

<!DOCTYPE html>
<html>
<body>

<img src="planets.gif" width="145" height="126" usemap="#planetmap">

<map name="planetmap">
  <area id="venus" shape="circle" coords="124,58,8" alt="Venus" href="venus.htm" target="_self">
</map>

<p>Click the button to return the value of the target attribute for the "venus" area in the image-map.</p>

<button onclick="myFunction()">Try it</button>

<p id="demo"></p>

<script>
function myFunction() {
  var x = document.getElementById("venus").target;
  document.getElementById("demo").innerHTML = x;
}
</script>

</body>
</html>

Základní objekt

Najděte základní adresu URL pro všechny relativní adresy URL na stránce

<!DOCTYPE html>
<html>
<head>
<base id="htmldom" href="https://www.w3schools.com/jsref/">
</head>
<body>

<p>Click the button to display the value of the href attribute of the base element.</p>

<button onclick="myFunction()">Try it</button>

<p id="demo"></p>

<script>
function myFunction() {
  var x = document.getElementById("htmldom").href;
  document.getElementById("demo").innerHTML = x;
}
</script>

</body>
</html>

Najděte základní cíl pro všechny odkazy na stránce

<!DOCTYPE html>
<html>
<head>
<base id="htmldom" target="_self" href="https://www.w3schools.com/jsref/">
</head>
<body>

<p>Click the button to display the value of the target attribute of the base element.</p>

<button onclick="myFunction()">Try it</button>

<p id="demo"></p>

<script>
function myFunction() {
  var x = document.getElementById("htmldom").target;
  document.getElementById("demo").innerHTML = "Base target for all links: " + x;
}
</script>

</body>
</html>

Objekt IFrame

Změňte barvu pozadí prvku iframe

<!DOCTYPE html>
<html>
<body>

<iframe id="myframe" src="demo_iframe.htm">
<p>Your browser does not support iframes.</p>
</iframe>

<p>Click the button to change the background color of the document in the iframe.</p>

<p id="demo"></p>

<button onclick="myFunction()">Try it</button>

<script>
function myFunction() {
  var x = document.getElementById("myframe");
  x.style.backgroundColor = "red";
}
</script>

</body>
</html>

Najděte výšku prvku iframe

<!DOCTYPE html>
<html>
<body>

<iframe id="myframe" src="/default.asp" height="200" width="250">
<p>Your browser does not support iframes.</p>
</iframe>

<p>Click the button to display the height of the iframe.</p>

<button onclick="myFunction()">Try it</button>

<p id="demo"></p>

<script>
function myFunction() {
  var x = document.getElementById("myframe").height;
  document.getElementById("demo").innerHTML = x;
}
</script>

</body>
</html>

Najděte hodnotu atributu name prvku iframe

<!DOCTYPE html>
<html>
<body>

<iframe id="myframe" src="/default.asp" name="iframe_a"></iframe>

<p>Click the button to return the name of the iframe.</p>

<button onclick="myFunction()">Try it</button>

<p id="demo"></p>

<script>
function myFunction() {
  var x = document.getElementById("myframe").name;
  document.getElementById("demo").innerHTML = x;
}
</script>

</body>
</html>

Najděte atribut source (src) prvku iframe

<!DOCTYPE html>
<html>
<body>

<iframe id="myframe" src="/default.asp"></iframe>

<p>Click the button to display the value of the src attribute in the iframe.</p>

<button onclick="myFunction()">Try it</button>

<p id="demo"></p>

<script>
function myFunction() {
  var x = document.getElementById("myframe").src;
  document.getElementById("demo").innerHTML = x;
}
</script>

</body>
</html>

Změňte atribut source (src) prvku iframe

<!DOCTYPE html>
<html>
<body>

<iframe id="myframe" src="/default.asp"></iframe>

<p>Click the button to change the src attribute in the iframe.</p>

<button onclick="myFunction()">Try it</button>

<script>
function myFunction() {
  document.getElementById("myframe").src = "http://www.cnn.com";
}
</script>

</body>
</html>

Obrazový objekt

Najděte alternativní text obrázku

<!DOCTYPE html>
<html>
<body>

<img id="myImg" src="compman.gif" alt="Crazy computerman" width="107" height="98">

<p>Click the button to display the alternate text of the image.</p>

<button onclick="myFunction()">Try it</button>

<p id="demo"></p>

<script>
function myFunction() {
  var x = document.getElementById("myImg").alt;
  document.getElementById("demo").innerHTML = x;
}
</script>

</body>
</html>

Najděte výšku obrázku

<!DOCTYPE html>
<html>
<body>

<img id="myImg" src="compman.gif" width="107" height="98">

<p>Click the button to display the height of the image.</p>

<button onclick="myFunction()">Try it</button>

<p id="demo"></p>

<script>
function myFunction() {
  var x = document.getElementById("myImg").height;
  document.getElementById("demo").innerHTML = x;
}
</script>

</body>
</html>

Kliknutím zobrazíte verzi obrázku ve vysokém rozlišení

<!DOCTYPE html>
<html>
<body>
<script>
function changeImage() {
  document.getElementById('myimage').src = "compman.gif";
}
</script>

<img id="myimage" onclick="changeImage()" src="compman_lowres.gif" width="107" height="98">

<p>Click the image to display a high resolution version.</p>

</body>
</html>

Najděte zdroj (src) obrázku

<!DOCTYPE html>
<html>
<body>

<img id="myImg" src="compman.gif" width="107" height="98">

<p>Click the button to display the src attribute of the image.</p>

<button onclick="myFunction()">Try it</button>

<p id="demo"></p>

<script>
function myFunction() {
  var x = document.getElementById("myImg").src;
  document.getElementById("demo").innerHTML = x;
}
</script>

</body>
</html>

Změňte zdroj obrázku

<!DOCTYPE html>
<html>
<body>

<img id="myImg" src="compman_lowres.gif" width="107" height="98">
<br><br>
<button onclick="document.getElementById('myImg').src='compman.gif'">On</button>
<button onclick="document.getElementById('myImg').src='compman_lowres.gif'">Off</button>

</body>
</html>

Změňte zdroj žárovky

<!DOCTYPE html>
<html>
<body>

<img id="myImage" onclick="changeImage()" src="pic_bulboff.gif" width="100" height="180">

<p>Click the light bulb to turn on/off the light.</p>

<script>
function changeImage() {
  var image = document.getElementById('myImage');
  if (image.src.match("bulbon")) {
    image.src = "pic_bulboff.gif";
  } else {
    image.src = "pic_bulbon.gif";
  }
}
</script>

</body>
</html>

Najděte hodnotu atributu usemap obrázku

<!DOCTYPE html>
<html>
<body>

<img id="planets" src="planets.gif" width="145" height="126" usemap="#planetmap">

<map name="planetmap">
  <area id="venus" shape="circle" coords="124,58,8" alt="The planet venus" href="venus.htm">
</map>

<p>Click the button to display the value of the usemap attribute of the image.</p>

<button onclick="myFunction()">Try it</button>

<p id="demo"></p>

<script>
function myFunction() {
  var x = document.getElementById("planets").useMap;
  document.getElementById("demo").innerHTML = x;
}
</script>

</body>
</html>

Objekty tabulky

Změňte šířku okraje tabulky

<!DOCTYPE html>
<html>
<head>
<script>
function changeBorder(id) {
  document.getElementById(id).style.border = "5px solid";
}
</script>
</head>
<body>

<table style="border:1px solid black" id="myTable">
  <tr>
    <td>100</td>
    <td>200</td>
  </tr>
  <tr>
    <td>300</td>
    <td>400</td>
  </tr>
</table>

<p>
<input type="button" onclick="changeBorder('myTable')" value="Change Border">
</p>

</body>
</html>

Změňte výplň stolu

<!DOCTYPE html>
<html>
<head>
<script>
function padding(id) {
  document.getElementById(id).style.padding = "15px";
}

</script>
</head>
<body>

<table id="myTable" style="border:1px solid black">
  <tr>
    <td>100</td>
    <td>200</td>
  </tr>
  <tr>
    <td>300</td>
    <td>400</td>
  </tr>
</table>

<p>
<input type="button" onclick="padding('myTable')" value="Change padding">
</p>

</body>
</html>

Najděte vnitřní HTML buňky

<!DOCTYPE html>
<html>
<head>
<script>
function getCellContent(id) {
  var x = document.getElementById(id).rows[0].cells;
  document.getElementById("demo").innerHTML = x[0].innerHTML;
}
</script>
</head>
<body>

<table id="myTable" style="border: 1px solid black">
  <tr>
    <td>cell 1</td>
    <td>cell 2</td>
  </tr>
  <tr>
    <td>cell 3</td>
    <td>cell 4</td>
  </tr>
</table>

<p>
<input type="button" onclick="getCellContent('myTable')" value="Display first cell">
</p>

<p id="demo"></p>

</body>
</html>

Vytvořte popisek pro tabulku

<!DOCTYPE html>
<html>
<head>
<script>
function createCaption(id) {
  document.getElementById(id).createCaption().innerHTML = "My new caption";
}
</script>
</head>
<body>

<table id="myTable" style="border: 1px solid black">
  <tr>
    <td>Row1 cell1</td>
    <td>Row1 cell2</td>
  </tr>
  <tr>
    <td>Row2 cell1</td>
    <td>Row2 cell2</td>
  </tr>
</table>

<p>
<input type="button" onclick="createCaption('myTable')" value="Create caption">
</p>

</body>
</html>

Odstraňte řádky v tabulce

<!DOCTYPE html>
<html>
<body>

<table id="myTable" style="padding:8px;border:1px solid black">
  <tr>
    <td>Jill</td>
    <td>Smith</td>
    <td>50</td>
  </tr>
  <tr>
    <td>Eve</td>
    <td>Jackson</td>
    <td>94</td>
  </tr>
  <tr>
    <td>John</td>
    <td>Doe</td>
    <td>80</td>
  </tr>
</table>

<p>
<input type="button" value="Delete one Row"
onclick="document.getElementById('myTable').deleteRow(0)">
</p>

</body>
</html>

Přidejte řádky do tabulky

<!DOCTYPE html>
<html>
<head>
<script>
function insRow(id) {
  var x = document.getElementById(id).insertRow(0);
  var y = x.insertCell(0);
  var z = x.insertCell(1);
  y.innerHTML = z.innerHTML = "New";
}
</script>
</head>

<body>
<table id="myTable" style="border: 1px solid black">
  <tr>
    <td>Row1 cell1</td>
    <td>Row1 cell2</td>
  </tr>
  <tr>
    <td>Row2 cell1</td>
    <td>Row2 cell2</td>
  </tr>
  <tr>
    <td>Row3 cell1</td>
    <td>Row3 cell2</td>
  </tr>
</table>

<p>
<input type="button" onclick="insRow('myTable')" value="Insert row">
</p>

</body>
</html>

Změňte obsah buňky tabulky

<!DOCTYPE html>
<html>
<head>
<script>
function changeContent(id, row, cell, content) {
  var x = document.getElementById(id).rows[row].cells;
  x[cell].innerHTML = content;
}
</script>
</head>
<body>

<table id="myTable" border="1">
  <tr>
    <td>Row1 cell1</td>
    <td>Row1 cell2</td>
  </tr>
  <tr>
    <td>Row2 cell1</td>
    <td>Row2 cell2</td>
  </tr>
  <tr>
    <td>Row3 cell1</td>
    <td>Row3 cell2</td>
  </tr>
</table>

<p>
<input type="button" onclick="changeContent('myTable', 0, 0, 'Hello')" value="Change content">
</p>

</body>
</html>