小白教程
所有教程
关于
Search
172.70.126.152
172.70.126.152
参数设置
贡献
退出
操作
编辑
移动
保护
信息
历史
删除
查看“HTML class 属性”的源代码
本页内容
上一节:
HTML块和内联元素
下一节:
HTML_id_属性
因为以下原因,您没有权限编辑本页:
您请求的操作仅限属于该用户组的用户执行:
用户
您可以查看和复制此页面的源代码。
[[Category:HTML教程|31]] ''' <nowiki>class</nowiki> '''属性用于指定 HTML 元素的类。多个 HTML 元素可以共享同一个class。 == 使用类属性 == 该''' <nowiki>class</nowiki> '''属性通常用于指向样式表中的类名。JavaScript 也可以使用它来访问和操作具有特定类名的元素。 在下面的示例中,我们有三个''' <nowiki><div></nowiki> '''元素的''' <nowiki>class</nowiki> '''属性值为“city”。 根据head 部分中的样式定义,所有三个''' <nowiki><div></nowiki> ''' 元素的样式都将相同:''' <nowiki>.city</nowiki> ''' <sample title="" hererun="s" desc=""> <!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> </sample> 在下面的示例中,我们有两个''' <nowiki><span></nowiki> '''元素的''' <nowiki>class</nowiki> '''属性值为“note”。 根据head 部分中的样式定义,这两个''' <nowiki><span></nowiki> ''' 元素的样式将相同:''' <nowiki>.note</nowiki> ''' <sample title="" hererun="s" desc=""> <!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> </sample> 提示:该''' <nowiki>class</nowiki> '''属性可用于任何HTML 元素。 注意:类名区分大小写! 提示:您可以在我们的CSS 教程中了解更多关于 CSS 的信息。 == 类的语法 == 创建一个类;写一个句点 (.) 字符,后跟一个类名。然后,在花括号 {} 中定义 CSS 属性: <sample title="" hererun="s" desc="创建一个名为“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> </sample> == 多个类 == HTML 元素可以属于多个类。 要定义多个类,请用空格分隔类名,例如 <div class="city main">。该元素将根据所有指定的类进行样式设置。 在下面的例子中,第一个''' <nowiki><h2></nowiki> '''元素既属于''' <nowiki> city</nowiki> '''类也属于''' <nowiki>main</nowiki> '''类,并且会从这两个类中获取 CSS 样式: <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> <html> <head> <style> .city { background-color: tomato; color: white; padding: 10px; } .main { text-align: center; } </style> </head> <body> <h2>多个class</h2> <p>这里有两个class, main和city,main会被居中显示</p> <h2 class="city main">北京</h2> <h2 class="city">上海</h2> <h2 class="city">成都</h2> </body> </html> </run> == 不同的元素可以共享同一个类 == 不同的 HTML 元素可以指向同一个类名。 在以下示例中,''' <nowiki><h2></nowiki> '''和都''' <nowiki><p></nowiki> ''' 指向“城市”类,并且将共享相同的样式: <sample title="" desc="" run="diff"> <h2 class="city">北京</h2> <p class="city">北京是中国的首都</p> </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 可以使用以下方法访问具有特定类名的元素''' <nowiki>getElementsByClassName()</nowiki> ''': <sample title="" run="s" desc="单击一个按钮以隐藏所有类名为“city”的元素:" > <script> function myFunction() { var x = document.getElementsByClassName("city"); for (var i = 0; i < x.length; i++) { x[i].style.display = "none"; } } </script> </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>
返回至“
HTML class 属性
”。
上一节:
HTML块和内联元素
下一节:
HTML_id_属性