Home Posts filed under HTML
Showing posts with label HTML. Show all posts
Showing posts with label HTML. Show all posts

Tuesday, December 25, 2018

Class Attribute In JavaScript

Comment

Class Attribute In JavaScript


JavaScript can access element with a specified className by using the getElementsByClass() method.

Example:

<!DOCTYPE html>
<html>
<body>

<h2>Using The class Attribute in JavaScript</h2>
<p>Click the button, to hide all elements with the class name "city", with JavaScript:</p>

<button onclick="myFunction()">Hide elements</button>

<h2 class="city">Delhi</h2>
<p>Delhi   is the capital of India.</p>

<h2 class="city">Kathmandu</h2>
<p>Kathmandu is the capital of Nepal.</p>

<h2 class="city">Dhaka</h2>
<p>Dhaka is the capital of Bangladesh.</p>

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

</body>
</html>
Result:

Using The class Attribute in JavaScript

Click the button, to hide all elements with the class name "city", with JavaScript:

Hide elements

Delhi is the capital of India.

Kathmandu is the capital of Nepal.

Dhaka is the capital of Bangladesh.

Another example of class Attribute

Comment

Another example of class Attribute


Using tree div elements that point to the same class name.

<!DOCTYPE html>
<html>
<head>
<style>
.cities {
background-color: black;
color: white;
margin:20px;
padding:20px;
}
</style>
</head>
<body>
<div class="cities">
<h2>Delhi</h2>
<p> Delhi is the captical of India</p>
</div>

<div class="cities">
<h2>Kathmandu</h2>
<p> Kathmandu is the captical of Nepal</p>
</div>

<div class="cities">
<h2>Dhaka</h2>
<p> Dhaka is the captical of Bangladesh</p>
</div>

</body>
</html>
 Result:

Delhi

Delhi is the captical of India

Kathmandu

Kathmandu is the captical of Nepal

Dhaka

Dhaka is the captical of Bangladesh

Class Attribute In HTML

Comment

Class Attribute In HTML

The class is an attribute which specifies one or more class names for an HTML element. The class name can be used by CSS and JavaScript to do some tasks for HTML elements.

A class attribute can be define within <style> tag or separate file using (.) character.

Example:

<!DOCTYPE html>
<html>
<head>
<style>
  .headings {
  color: Tomato;
  font-family: Verdana;
  background-color: black;
}
</style>
</head>
<body>

<h1 class="headings">This is first Heading</h1>
<h2 class="headings">This is first Heading</h2>
<h3 class="headings">This is first Heading</h3>
<h4 class="headings">This is first Heading</h4>

</body>
</html>

Result:

This is first Heading
This is first Heading
This is first Heading

This is first Heading

Tags:

Class Attribute In HTML, HTML

Monday, December 24, 2018

The difference between Class and Id in html

Comment

The difference between Class and Id in html

Id can be used to identify one element , whereas a Class can be used to Identify more than one.

Example:

<!DOCTYPE html> 
<html> 
<head> 
<style> 
#myid { 
    background-color: pink; 
    color: black; 
    padding: 40px; 
    text-align: center; 
} 
 
.name { 
    background-color: orange; 
    color: white; 
    padding: 10px; 
}  
</style> 
</head> 
<body> 
 
<h2>Difference Between Class and ID</h2> 
 
<h1 id="myid">My Friends name</h1> 
 
<h2 class="name">Gopal</h2> 
<p>Gopal my best friend.</p> 
 
<h2 class="name">Akash</h2> 
<p>Akash also my best friend </p> 
 
<h2 class="name">Arun</h2> 
<p>Arun is funny man.</p> 
 
</body> 
</html> 

Result:
Difference Between Class and ID


My Friends name


Gopal
Gopal my best friend.


Akash


Akash also my best friend


Arun


Arun is funny man.


HTML Id Attribute

Comment

HTML Id Attribute

The id attribute specifies a unique id for an HTML element. This HTML id value can be used with CSS and Javascript to perform certain task.

In css, if you want to select an element with a specific id, write a “#” character.

<!DOCTYPE html>
<html>
<head>
<style>
#myid {
  background-color: blue;
  color: black;
  padding: 40px;
  text-align: center;
}
</style>
</head>
<body>

<h2> Id Attribute</h2>
<p>Use CSS to style an element with the id "myId":</p>

<h1 id="myid">My Id</h1>

</body>
</html>

Result:

Id Attribute

Use CSS to style an element with the id "myId":


My Id


What is HTML ?

Comment

What is HTML?

HTML stand for Hyper Text  Markup Language  which is most widely used for creating web pages and web application. It was created by Bernerls Lee in 1991.

The first version of HTML was 1.0 and it was released in 1991. Now a days total 6 HTML version released , HTML 1.o, HTML 2.0, HTML 3.2, HTML 4.01, HTML 5.

Subscribe to: Posts (Atom)