Research/HTML

HTML_class and id

RIEM 2023. 5. 2. 18:59

 

HTML class Attribute

It is possible to specify a class in HTML. Many HTML elements can share the same class.

 

Using the class Attribute

The class attribute track a class name in a style sheet. It can work by using JavaScript and edit elements.

 

<!DOCTYPE HTML>
<HTML>
<HEAD>
<STYLE>

.city {
  background-color: tomato;
  color: white;
  border: 2px solid brown;
  margin: 20px;
  padding: 10px;
}

</STYLE>
</HEAD>

<BODY>

<div class="city">
  <h2>New York</h2>
  <p>This is NYC</p>
</div>

<div class="city">
  <h2>Amsterdam</h2>
  <p>WElKOM</p>
</div>

<div class="city">
  <h2>Bonjour</h2>
  <p>Hi</p>
</div>

</BODY>
</HTML>

 

 

 

Nice. We have <div> elements with a class attribute with the value of ‘city’. This is the example of block element.

 

Let’s see the example of inline element as well like <span>.

<!DOCTYPE HTML>
<HTML>
<HEAD>
<STYLE>

.name {
  color: silver;
  font-size: 200%;
}

</STYLE>
</HEAD>

<BODY>

<h1>My <span class="name">Serry</span> please let see your eye</h1>
<p>shining <span class="name">Serry</span>'s eye</span>, Allow me.</p>

</BODY>
</HTML>

 



The Syntax For Class

You just need ‘.’ to create a class and it is followed by a class name. And write properties within curly braces {}.

 

 

 

Multiple Classes

HTML elements can contains multiple class. You can just write class values separately with space inbetween.

In case of first code, the h2 element has both .city class and .main class.

 

Different Elements Can have same class

Class can be shared not only in one element but also different type of elements. 

 

How to use the class attribute in JavaScript?

You can use class name with Javascript code and execute specific tasks. When you access to elements with a class name, ‘getElementsByClassName()’ method is the key.

<!DOCTYPE HTML>
<HTML>
<HEAD>

<STYLE>

</STYLE>
</HEAD>

<BODY>

<h2> How to manipulate the class attribute with JavaScript</h2>
<p> Click and hide elements with class name "city"</p>

<!-- if you click the button, myFunction() start working -->
<button onclick="myFunction()">Hide elements!</button>

<h2 class="city">London</h2>
<p>London is the capital of England.</p>

<h2 class="city">Paris</h2>
<p>Paris is the capital of France.</p>

<h2 class="city">Amsterdam</h2>
<p>Amsterdam is the capital of Netherland.</p>

<script>
<!-- 1) get elements with the class name "city". And change all element's style.display attribute's value to 'none' to hide-->

function myFunction() {
  var x = document.getElementsByClassName("city");
  for (var i = 0; i < x.length; i++) {
 x[i].style.display = "none";
  }
}
</script>

</BODY>
</HTML>



HTML id Attribute

THe HTML id attribute is for unique id for an HTML element. You cannot have more than one element with the same id in an HTML document.

 

Using The id Attribute

The id attribute specifies a unique id for an HTML element. What does it mean? The value of the is an attribute is unique. 

 

<!DOCTYPE HTML>
<HTML>
<HEAD>

<STYLE>

#theFirstHeader {
 color: red;
 background-color: lightblue;
 padding: 40px;
 text-align: center;
}
</STYLE>
</HEAD>

<BODY>

<h1 id="theFirstHeader">Ok, I gotta do this</h1>

</BODY>
</HTML>

 

 

 

Difference Between Class and ID

What is the difference between Class and ID?

 

Class can be used by multiple HTML elements.

Id must be used only once. 

 

HTML Bookmarks with ID and Links

You can use id attribute as bookmark links

<BODY>

<a href="#C10">Jump to Summary2</a>

<br><br><br><br><br><br><br><br>
<a id="#Summary1">Jump to Summary1</a>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br>

<a id="C10">Jump to Summary2</a>


</BODY>

First, create a bookmark with the id attribute. Then, add a link to the bookmark (“Jump to Chapter 4”), from within the same page.

 Or, add a link to the bookmark from another page.

<a href="html_demo.html#C4">Jump to Chapter 4</a>

 

 

Using The id Attribute in JavaScript

The id attribute can also be used by Javascript to perform some tasks for that specific element. JavaScript can access an element with a specific id with the getElementById() method.

 

<h1 id="heading">hi guys</h1>
<button onclick="display()">Change Text</button>

<script>
function display() {
  document.getElementById("heading").innerHTML = "Oh, nothing..";
}
</script>

 

 

If you click the button..

Amazing!

 

I would like to create something more interesting. 

Can I create the button that change a texts inside a table?

 

<BODY>

<Table>
  <tr>
 <th>Workout morning</th>
 <th>Workout evening</th>
  <tr>
  <tr>
 <td id="morning_feeling">I don't like</td>
 <td id="evening_feeling">Sometimes I like</td>
  <tr>
  <tr>
 <td>I have energy</td>
 <td>I don't have energy</td>
  <tr>

</table>

<br>
<button onclick="changeYourMindset()">Change Your Mind</button>

<script>
function changeYourMindset() {
  document.getElementById('morning_feeling').innerHTML = "Oh I love it!";
 
}
</script>
</BODY>

 

I created function called ‘changeYourMindeset(). If you click the button, it directly executes the function. It means you get do innerHTML text element by ID which is ‘morning_feeling’ from somewhere and change its string into “Oh I love it!”.

innerHTML is very useful element property. It is one of many HTML DOM elements. I would study this later.

https://www.w3schools.com/jsref/dom_obj_all.asp

 

 

If you click the button,

Nice!

 

저작자표시