“HTML class 属性”的版本间差异

本页内容
上一节: HTML块和内联元素 下一节: HTML_id_属性
Neo（讨论 | 贡献）
无编辑摘要
 
（未显示同一用户的6个中间版本）
第1行： 第1行：
[[Category:HTML教程|31]]
[[Category:HTML教程|31]]
 
''' <nowiki>class</nowiki> '''属性用于指定 HTML 元素的类。多个 HTML 元素可以共享同一个class。
''' <nowiki>class</nowiki> '''属性用于指定 HTML 元素的类。
 
多个 HTML 元素可以共享同一个类。


== 使用类属性 ==
== 使用类属性 ==
第28行： 第25行：
     <body>
     <body>
         <div class="city">
         <div class="city">
             <h2>London</h2>
             <h2>伦敦</h2>
             <p>London is the capital of England.</p>
             <p>伦敦是英国的首都。</p>
         </div>
         </div>
         <div class="city">
         <div class="city">
             <h2>Paris</h2>
             <h2>巴黎</h2>
             <p>Paris is the capital of France.</p>
             <p>巴黎是法国的首都.</p>
         </div>
         </div>
         <div class="city">
         <div class="city">
             <h2>Tokyo</h2>
             <h2>东京</h2>
             <p>Tokyo is the capital of Japan.</p>
             <p>东京是日本的首都.</p>
         </div>
         </div>
     </body>
     </body>
第59行： 第56行：


     <body>
     <body>
         <h1>My <span class="note">Important</span> Heading</h1>
         <h1>My <span class="note">重要的</span> 标题</h1>
         <p>This is some <span class="note">important</span> text.</p>
         <p>This is some <span class="note">重要的</span> text.</p>
     </body>
     </body>


第89行： 第86行：


     <body>
     <body>
         <h2 class="city">London</h2>
         <h2 class="city">伦敦</h2>
         <p>London is the capital of England.</p>
         <p>伦敦是英国的首都。</p>
         <h2 class="city">Paris</h2>
         <h2 class="city">巴黎</h2>
         <p>Paris is the capital of France.</p>
         <p>巴黎是法国的首都.</p>
         <h2 class="city">Tokyo</h2>
         <h2 class="city">东京</h2>
         <p>Tokyo is the capital of Japan.</p>
         <p>东京是日本的首都.</p>
     </body>
     </body>


     </html>
     </html>
</sample>
</sample>
== 多个类 ==
== 多个类 ==
HTML 元素可以属于多个类。
HTML 元素可以属于多个类。
第147行： 第145行：


在以下示例中，''' <nowiki><h2></nowiki> '''和都''' <nowiki><p></nowiki> ''' 指向“城市”类，并且将共享相同的样式：
在以下示例中，''' <nowiki><h2></nowiki> '''和都''' <nowiki><p></nowiki> ''' 指向“城市”类，并且将共享相同的样式：
<sample title="" desc="" run="diff">


<sample title="" hererun="s" desc="" >
<h2 class="city">北京</h2>
<p class="city">北京是中国的首都</p>
 
</sample>
<run title="" name="diff" desc="" >
<!DOCTYPE html>
<!DOCTYPE html>
<html>
<html>
第162行： 第165行：
<body>
<body>


<h2>Different Elements Can Share Same Class</h2>
<h2>不同元素同一个class样式</h2>


<p>Even if the two elements do not have the same tag name, they can both point to the same class, and get the same CSS styling:</p>
<p>即使是两个不同的html元素标签，也可以使用同一个class</p>


<h2 class="city">Paris</h2>
<h2 class="city">北京</h2>
<p class="city">Paris is the capital of France.</p>
<p class="city">北京是中国的首都</p>


</body>
</body>
</html>
</html>


</sample>
</run>


== JavaScript 中类属性的使用 ==
== JavaScript 中类属性的使用 ==

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>

取自“https://www.xiaobai.wang/index.php?title=HTML_class_属性&oldid=654”
上一节: HTML块和内联元素 下一节: HTML_id_属性
此页面最后编辑于2022年8月6日 (星期六) 10:11。