హెచ్టిఎంలో క్లాస్ అంశం

నిర్వచనం మరియు ఉపయోగం

క్లాస్ అంశం మెటాడాటా మెటాడాటా అంశం క్లాస్ పేరును నిర్వచిస్తుంది.

క్లాస్ అటువంటి అంశాలు ముఖ్యంగా షేడ్ టేబుల్ లో క్లాస్స్ లకు ఉపయోగిస్తారు. అయితే, అది జావాస్క్రిప్ట్ (హెచ్టిఎండాం డామ్ ఆఫ్ ఎలమెంట్స్) ద్వారా కూడా ప్రత్యేక క్లాస్ కలిగిన హెచ్టిఎంలో మార్పులు చేయవచ్చు.

మరింత చూడండి:

హెచ్ఎంఎల్ శిక్షణ మాదిరిగా:HTML అటీబ్యూట్స్

సిఎస్ఎస్ శిక్షణ మాదిరిగా:CSS సింథెక్స్

సిఎస్ఎస్ పరిచయం మాదిరిగా:CSS .class సెలెక్టర్

హెచ్ఎంఎల్ డామ్ పరిచయం మాదిరిగా:హెచ్ఎంఎల్ డామ్ గెటబైక్‌క్లాస్సెస్ అటువంటి విధంగా ఉపయోగించండి:

హెచ్ఎంఎల్ డామ్ పరిచయం మాదిరిగా:హెచ్ఎంఎల్ డామ్ క్లాస్‌నేమ్ అటువంటి విధంగా ఉపయోగించండి:

హెచ్ఎంఎల్ డామ్ పరిచయం మాదిరిగా:హెచ్ఎంఎల్ డామ్ క్లాస్‌లిస్ట్ అటువంటి విధంగా ఉపయోగించండి:

హెచ్ఎంఎల్ డామ్ పరిచయం మాదిరిగా:HTML DOM Style ఆబ్జెక్ట్

ఉదాహరణ

ఉదాహరణ 1

హెచ్ఎంఎల్ డాక్యుమెంట్లో class అటువంటి విధంగా ఉపయోగించండి:

<html>
<head>
<style>
h1.intro {
  color: blue;
}
p.important {
  color: green;
}
</style>
</head>
<body>
<h1 class="intro">Header 1</h1>
<p>A paragraph.</p>
<p class="important">మీరు గమనించాలి, ఇది ఒక ముఖ్యమైన పొందిక ఉంది。:）</p>
</body>
</html>

స్వయంగా ప్రయత్నించండి

పేజీ కింద మరిన్ని ఉదాహరణలు లభిస్తాయి。

విధానం

<element class="classname">

అటువంటి విలువ

విలువ వివరణ
classname

ఎలమెంట్కు ఒక లేదా పలు క్లాస్సులను సూచించండి。

పలు క్లాస్సులను సూచించడానికి వెర్రిగా ఉపయోగించాలి.

ఇది ఒక హెచ్ఎంఎల్ ఎలమెంట్కు పలు సిఎస్ఎస్ క్లాస్సులను కలిపేందుకు అనుమతిస్తుంది。

ఉదాహరణకు:<span class="left important">

పేరు నియమం:

  • మొదటిగా అక్షరం A-Z లేదా a-z ఉండాలి
  • అక్షరాలు (A-Za-z)、సంఖ్యలు (0-9)、హైఫన్ ("-") మరియు అండర్‌లైన్ ("_") తర్వాత అనుసరిస్తాయి

మరిన్ని ఉదాహరణలు

ఉదాహరణ 2

ఒక హెచ్ఎంఎల్ ఎలమెంట్కు పలు క్లాస్సులను జోడించండి:

<!DOCTYPE html>
<html>
<head>
<style>
h1.intro {
  color: blue;
  text-align: center;
}
.important {
  background-color: yellow;
}
</style>
</head>
<body>
<h1 class="intro important">శీర్షిక 1</h1>
<p>ఒక పొందిక.</p>
</body>
</html>

స్వయంగా ప్రయత్నించండి

ఉదాహరణ 3

జావాస్క్రిప్ట్ ఉపయోగించి మొదటి class="example" ఎలమెంట్కు (అంకీతం 0) పసుపు బ్యాక్‌గ్రౌండ్ కలర్ జోడించండి。

let x = document.getElementsByClassName("example");
x[0].style.backgroundColor = "yellow";

స్వయంగా ప్రయత్నించండి

ఉదాహరణ 4

JavaScript ఉపయోగించి "mystyle" క్లాస్ ను id అనునది "myDIV" ఎలిమెంట్ కు జోడించండి:

document.getElementById("myDIV").classList.add("mystyle");

స్వయంగా ప్రయత్నించండి

బ్రౌజర్ మద్దతు

చ్రోమ్ ఎడ్జ్ ఫైర్ఫాక్స్ సఫారీ ఒపేరా
చ్రోమ్ ఎడ్జ్ ఫైర్ఫాక్స్ సఫారీ ఒపేరా
మద్దతు మద్దతు మద్దతు మద్దతు మద్దతు