Example 1: height and width

The following example shows the use of the height and width properties alongside images of varying dimensions:

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <title>width/height example</title>
  5. <script>
  6. function init() {
  7.   var arrImages = new Array(3);
  9.   arrImages[0] = document.getElementById("image1");
  10.   arrImages[1] = document.getElementById("image2");
  11.   arrImages[2] = document.getElementById("image3");
  13.   var objOutput = document.getElementById("output");
  14.   var strHtml = "<ul>";
  16.   for (var i = 0; i < arrImages.length; i++) {
  17.     strHtml += "<li>image" + (i+1) + 
  18.             ": height=" + arrImages[i].height + 
  19.             ", width=" + arrImages[i].width + 
  20.             ", style.height=" + arrImages[i].style.height + 
  21.             ", style.width=" + arrImages[i].style.width + 
  22.             "<\/li>";
  23.   }
  25.   strHtml += "<\/ul>";
  27.   objOutput.innerHTML = strHtml;
  28. }
  29. </script>
  30. </head>
  31. <body onload="init();">
  33. <p>Image 1: no height, width, or style 
  34.   <img id="image1" src="http://www.mozilla.org/images/mozilla-banner.gif">
  35. </p>
  37. <p>Image 2: height="50", width="500", but no style 
  38.   <img id="image2"
  39.        src="http://www.mozilla.org/images/mozilla-banner.gif" 
  40.        height="50" width="500">
  41. </p>
  43. <p>Image 3: no height, width, but style="height: 50px; width: 500px;"
  44.   <img id="image3"
  45.        src="http://www.mozilla.org/images/mozilla-banner.gif" 
  46.        style="height: 50px; width: 500px;">
  47. </p>
  49. <div id="output"> </div>
  50. </body>
  51. </html>

Example 2: Image Attributes

<!DOCTYPE html>
<html lang="en">
<head>
<title>Modifying an image border</title>
<script>
function setBorderWidth(width) {
  document.getElementById("img1").style.borderWidth = width + "px";
}
</script>
</head>
<body>
<p>
  <img id="img1"
       src="image1.gif"
       style="border: 5px solid green;"
       width="100" height="100" alt="border test">
</p>
<form name="FormName">
  <input type="button" value="Make border 20px-wide" onclick="setBorderWidth(20);" />
  <input type="button" value="Make border 5px-wide"  onclick="setBorderWidth(5);" />
</form>
</body>
</html>

Example 3: Manipulating Styles

In this simple example, some basic style properties of an HTML paragraph element are accessed using the style object on the element and that object’s CSS style properties, which can be retrieved and set from the DOM. In this case, you are manipulating the individual styles directly. In the next example (see Example 4), you can use stylesheets and their rules to change styles for whole documents.

<!DOCTYPE html>
<html lang="en">
<head>
<title>Changing color and font-size example</title>
<script>
function changeText() {
  var p = document.getElementById("pid");
  p.style.color = "blue"
  p.style.fontSize = "18pt"
}
</script>
</head>
<body>
<p id="pid" onclick="window.location.href = 'http://www.cnn.com/';">linker</p>
<form>
  <p><input value="rec" type="button" onclick="changeText();" /></p>
</form>
</body>
</html>