“HTML class 属性”的版本间差异
本页内容
(→多个类) |
无编辑摘要 |
||
(未显示同一用户的10个中间版本) | |||
第1行: | 第1行: | ||
[[Category:HTML教程|31]] | [[Category:HTML教程|31]] | ||
''' <nowiki>class</nowiki> '''属性用于指定 HTML 元素的类。多个 HTML 元素可以共享同一个class。 | |||
''' <nowiki>class</nowiki> '''属性用于指定 HTML | |||
== 使用类属性 == | == 使用类属性 == | ||
第28行: | 第25行: | ||
<body> | <body> | ||
<div class="city"> | <div class="city"> | ||
<h2> | <h2>伦敦</h2> | ||
<p> | <p>伦敦是英国的首都。</p> | ||
</div> | </div> | ||
<div class="city"> | <div class="city"> | ||
<h2> | <h2>巴黎</h2> | ||
<p> | <p>巴黎是法国的首都.</p> | ||
</div> | </div> | ||
<div class="city"> | <div class="city"> | ||
<h2> | <h2>东京</h2> | ||
<p> | <p>东京是日本的首都.</p> | ||
</div> | </div> | ||
</body> | </body> | ||
第59行: | 第56行: | ||
<body> | <body> | ||
<h1>My <span class="note"> | <h1>My <span class="note">重要的</span> 标题</h1> | ||
<p>This is some <span class="note"> | <p>This is some <span class="note">重要的</span> text.</p> | ||
</body> | </body> | ||
第89行: | 第86行: | ||
<body> | <body> | ||
<h2 class="city"> | <h2 class="city">伦敦</h2> | ||
<p> | <p>伦敦是英国的首都。</p> | ||
<h2 class="city"> | <h2 class="city">巴黎</h2> | ||
<p> | <p>巴黎是法国的首都.</p> | ||
<h2 class="city"> | <h2 class="city">东京</h2> | ||
<p> | <p>东京是日本的首都.</p> | ||
</body> | </body> | ||
</html> | </html> | ||
</sample> | </sample> | ||
== 多个类 == | == 多个类 == | ||
HTML 元素可以属于多个类。 | HTML 元素可以属于多个类。 | ||
第106行: | 第104行: | ||
在下面的例子中,第一个''' <nowiki><h2></nowiki> '''元素既属于''' <nowiki> city</nowiki> '''类也属于''' <nowiki>main</nowiki> '''类,并且会从这两个类中获取 CSS 样式: | 在下面的例子中,第一个''' <nowiki><h2></nowiki> '''元素既属于''' <nowiki> city</nowiki> '''类也属于''' <nowiki>main</nowiki> '''类,并且会从这两个类中获取 CSS 样式: | ||
<sample title="" | <sample title="" desc="" run="m1"> | ||
<h2 class="city main">北京</h2> | |||
<h2 class="city">上海</h2> | |||
<h2 class="city">成都</h2> | |||
</sample> | |||
<run title="" name="m1"> | |||
<!DOCTYPE html> | <!DOCTYPE html> | ||
<html> | <html> | ||
第124行: | 第128行: | ||
<body> | <body> | ||
<h2> | <h2>多个class</h2> | ||
<p> | <p>这里有两个class, main和city,main会被居中显示</p> | ||
<h2 class="city main"> | <h2 class="city main">北京</h2> | ||
<h2 class="city"> | <h2 class="city">上海</h2> | ||
<h2 class="city"> | <h2 class="city">成都</h2> | ||
</body> | </body> | ||
第135行: | 第139行: | ||
</ | </run> | ||
== 不同的元素可以共享同一个类 == | == 不同的元素可以共享同一个类 == | ||
第141行: | 第145行: | ||
在以下示例中,''' <nowiki><h2></nowiki> '''和都''' <nowiki><p></nowiki> ''' 指向“城市”类,并且将共享相同的样式: | 在以下示例中,''' <nowiki><h2></nowiki> '''和都''' <nowiki><p></nowiki> ''' 指向“城市”类,并且将共享相同的样式: | ||
<sample title="" desc="" run="diff"> | |||
<h2 class="city">北京</h2> | |||
<p class="city">北京是中国的首都</p> | |||
</sample> | </sample> | ||
<run title="" name="diff" desc="" > | |||
<!DOCTYPE html> | |||
<html> | |||
<head> | |||
<style> | |||
.city { | |||
background-color: tomato; | |||
color: white; | |||
padding: 10px; | |||
} | |||
</style> | |||
</head> | |||
<body> | |||
<h2>不同元素同一个class样式</h2> | |||
<p>即使是两个不同的html元素标签,也可以使用同一个class</p> | |||
<h2 class="city">北京</h2> | |||
<p class="city">北京是中国的首都</p> | |||
</body> | |||
</html> | |||
</run> | |||
== JavaScript 中类属性的使用 == | == JavaScript 中类属性的使用 == | ||
JavaScript 也可以使用类名来为特定元素执行某些任务。 | JavaScript 也可以使用类名来为特定元素执行某些任务。 | ||
第150行: | 第182行: | ||
JavaScript 可以使用以下方法访问具有特定类名的元素''' <nowiki>getElementsByClassName()</nowiki> ''': | JavaScript 可以使用以下方法访问具有特定类名的元素''' <nowiki>getElementsByClassName()</nowiki> ''': | ||
<sample title="" | <sample title="" run="s" desc="单击一个按钮以隐藏所有类名为“city”的元素:" > | ||
<script>function myFunction() { | |||
<script> | |||
function myFunction() { | |||
var x = document.getElementsByClassName("city"); | |||
for (var i = 0; i < x.length; i++) { | |||
x[i].style.display = "none"; | |||
} | |||
} | |||
</script> | |||
</sample> | </sample> | ||
<run name="s"> | |||
<!DOCTYPE html> | |||
<html> | |||
<body> | |||
<h2>Use of The class Attribute in JavaScript</h2> | |||
<p>Click the button to hide all elements with class name "city":</p> | |||
<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">Tokyo</h2> | |||
<p>Tokyo is the capital of Japan.</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> | |||
</run> |
2022年8月6日 (六) 10:11的最新版本
class 属性用于指定 HTML 元素的类。多个 HTML 元素可以共享同一个class。
使用类属性
该 class 属性通常用于指向样式表中的类名。JavaScript 也可以使用它来访问和操作具有特定类名的元素。
在下面的示例中,我们有三个 <div> 元素的 class 属性值为“city”。 根据head 部分中的样式定义,所有三个 <div> 元素的样式都将相同: .city
示例
<!DOCTYPE html>
<html>
<head>
<style>
.city {
background-color: tomato;
color: white;
border: 2px solid black;
margin: 20px;
padding: 20px;
}
</style>
</head>
<body>
<div class="city">
<h2>伦敦</h2>
<p>伦敦是英国的首都。</p>
</div>
<div class="city">
<h2>巴黎</h2>
<p>巴黎是法国的首都.</p>
</div>
<div class="city">
<h2>东京</h2>
<p>东京是日本的首都.</p>
</div>
</body>
</html>
在下面的示例中,我们有两个 <span> 元素的 class 属性值为“note”。 根据head 部分中的样式定义,这两个 <span> 元素的样式将相同: .note
示例
<!DOCTYPE html>
<html>
<head>
<style>
.note {
font-size: 120%;
color: red;
}
</style>
</head>
<body>
<h1>My <span class="note">重要的</span> 标题</h1>
<p>This is some <span class="note">重要的</span> text.</p>
</body>
</html>
提示:该 class 属性可用于任何HTML 元素。
注意:类名区分大小写!
提示:您可以在我们的CSS 教程中了解更多关于 CSS 的信息。
类的语法
创建一个类;写一个句点 (.) 字符,后跟一个类名。然后,在花括号 {} 中定义 CSS 属性:
示例
创建一个名为“city”的类:
<!DOCTYPE html>
<html>
<head>
<style>
.city {
background-color: tomato;
color: white;
padding: 10px;
}
</style>
</head>
<body>
<h2 class="city">伦敦</h2>
<p>伦敦是英国的首都。</p>
<h2 class="city">巴黎</h2>
<p>巴黎是法国的首都.</p>
<h2 class="city">东京</h2>
<p>东京是日本的首都.</p>
</body>
</html>
多个类
HTML 元素可以属于多个类。
要定义多个类,请用空格分隔类名,例如
。该元素将根据所有指定的类进行样式设置。
在下面的例子中,第一个 <h2> 元素既属于 city 类也属于 main 类,并且会从这两个类中获取 CSS 样式:
示例
<h2 class="city main">北京</h2>
<h2 class="city">上海</h2>
<h2 class="city">成都</h2>
不同的元素可以共享同一个类
不同的 HTML 元素可以指向同一个类名。
在以下示例中, <h2> 和都 <p> 指向“城市”类,并且将共享相同的样式:
示例
<h2 class="city">北京</h2>
<p class="city">北京是中国的首都</p>
JavaScript 中类属性的使用
JavaScript 也可以使用类名来为特定元素执行某些任务。
JavaScript 可以使用以下方法访问具有特定类名的元素 getElementsByClassName() :
示例
单击一个按钮以隐藏所有类名为“city”的元素:
<script>
function myFunction() {
var x = document.getElementsByClassName("city");
for (var i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
}
</script>