Discussion on HTML Ids-Using CSS and JavaScript for a particular Id…

Swashata

17 html_logo Just a few days back one of our reader Dhawal asked me on our Sitemap post that how jump within a web-page using # URL without actually loading the page again. A good question indeed. But to answer that we need to go in-depth with HTML nesting and HTML element IDs. Although it is not that much tough to understand, but you need to have a little of patience to understand the concept.

So without haphazardly discussing on this matter we shall start from the very basic thing learning the following items:

  • Usage of HTML Ids and how to implement them
  • Using CSS to style up a particular Id and JavaScript to dynamically use the element.
  • Some other uses of HTML Ids.

So please read on…

Usage of HTML Ids and their Implementation on CSS and JS:

HTML is used to make web-pages. Along with that we use CSS (Cascading Style Sheet) to style the HTML elements and some Client side scripting language like JavaScript to do some more conditional modifications. HTML has evolved much and under HTML 4 things are not that easy which used to be on our class VI school books! Now we use classes to style up HTML elements, Id to differentiate between various Tags.

So, it is clear that HTML Ids are used to differentiate between various nesting elements used. Below we gave 2 example out of which one is about styling a particular HTML Id with CSS and another is changing the innerHTML of a particular element using JavaScript…

1. How we style up a particular nesting element using CSS:

Suppose our HTML nesting of a particular web-page is something like this:

<div id="nesting-1">

    <div id="nesting-2">

        <h1>This is My webpage</h1>

        <p>This is just some description</p>

        <ul>

            <li>This is the first item of the unordered list</li>

            <li><a href="http://greentechspot.blogspot.com">This is hyperlinked list item</a></li>

            <li>The last item of this list</li>

        </ul>

    </div>

</div>

Now we want to style up the div element having id “nesting-1” using CSS. Then we need to write the CSS part like this:

div#nesting-1 {

    overflow: hidden;

    background: #fff none repeat scroll 0 0;

    width: 70%;

    margin: 0 auto;

    padding: 2%;

    color: #000;

    /*Any other CSS code*/

}

2. Using JavaScript on a particular HTML tag:

Take a look at the following code:

<html>

    <head>

        <title>A sample page</title>

        <script type="text/javascript">
   1:  




   2:         function change(myvalue, fieldid) {




   3:             var tag = document.getElementById(fieldid);




   4:             tag.innerHTML = myvalue;




   5:         }




   6:         


</script>




        <style>




        div#nesting-1 {




        overflow: hidden;




        background: #fff none repeat scroll 0 0;




        width: 70%;




        margin: 0 auto;




        padding: 2%;




        color: #000;




        /*Any other CSS code*/




        }




        </style>




    </head>




    <body>




        <div id="nesting-1">




            <div id="nesting-2">




                <h1>This is My webpage</h1>




                <p>This is just some description</p>




                <ul>




                    <li>This is the first item of the unordered list</li>




                    <li><a href="http://greentechspot.blogspot.com">This is hyperlinked list item</a></li>




                    <li id="changing">The last item of this list</li>




                </ul>




            </div>




            <a href="javascript:;" onclick="change('So this is going to my value', 'changing')">Click here to change the last list element</a>




        </div>




    </body>




</html>

Just paste the code in a notepad file and save as abc.html. Open up the file using Firefox and click on the Click here to change the last list element button. You should see that the last list item’s value got changed from “The last item of this list” to “So this is going to my value”. Now let us see how this thing has worked!

  • First take a deeper look to the JS code. Here we have defined a function named “change” which is: 
    <script type="text/javascript">

    function change(myvalue, fieldid) {

        var tag = document.getElementById(fieldid);

        tag.innerHTML = myvalue;

    }

    </script>

  • So when this function is executed this will search the document to get the HTML element having the specified id. Then it will change the innerHTMl of that element to the value which we have specified through the argument of that function.
  • Lets now take a look on the following code: 
    <a href="javascript:;" onclick="change('So this is going to my value', 'changing')">Click here to change the last list element</a>

    Now this anchor element when clicked executes the function giving the arguments “So this is going to my value” and “changing”. Which means this will execute the JS function to search for the HTML element having id “changing” (here the <li> tag) and will change its innerHTML to “So this is going to my value”

It is just a simple example of JavaScript which uses the Id of a HTML element. Advanced programming may use many other aspects of it! Have a look to the w3schools guide to know more on this!

So from the above discussion we have learned how id of an HTML element can be used as:

  • As a style sheet selector.
  • As a means to reference a particular element from a script.

How about having a quick look at the w3c.org for a detailed info this?

This is it for this tutorial. On the next part we shall see how we can use the Id of a particular wrapping/nesting part of the web-page to jump to that portion using #. Also we shall discus on creating the custom jump elements using Ids.