当前位置: 首页>>代码示例 >>用法及示例精选 >>正文


HTML DOM HGroup用法及代码示例


DOM HGroup 对象用于表示 HTML <hgroup> 元素。它可以通过使用 JavaScript 中的任何选择器来访问,例如 getElementById()。

用法:

document.getElementById("hgroupid");

下面的示例演示了 hgroup 对象的使用。

范例1:在此示例中,HGroup 元素的背景颜色更改为绿色。



HTML


<!DOCTYPE html>
<html>
<body>
    <center>
        <h1>GeeksForGeeks</h1>
        <h2 style="font-size:35px;">
            DOM HGroup Object
        </h2>
        <!-- Using the HTML hgroup tag -->
        <hgroup id="GFG">
            <h1>Hello GeeksForGeeks</h1>
            <h3>Hello GeeksForGeeks.</h3>
            <h4>Hello GeeksForGeeks.</h4>
        </hgroup>
        <button onclick="myGeeks()">
            Submit
        </button>
    </center>
    <p id="geeks"></p>
     
    <script>
        function myGeeks() {
            var b = document.getElementById("GFG");
            b.style.backgroundColor = "green";
        }
    </script>
</body>
</html>

输出:

范例2:在此示例中,可以使用 document.createElement() 方法创建 HGroup 对象。

HTML


<!DOCTYPE html>
<html>
<head>
    <script>
        function myGeeks() {
            var x = document.createElement("HGROUP");
            document.body.appendChild(x);
            var Hg1 = document.createElement("H3");
            var txt = document.createTextNode(
                "GeeksForGeeks"
            );
            elemh1.appendChild(txt);
            x.appendChild(Hg1);
            var Hg2 = document.createElement("H4");
            var txt2 = document.createTextNode(
                "A computer science portal for Geek."
            );
            elemh2.appendChild(txt2);
            x.appendChild(Hg2);
        }
    </script>
</head>
<body>
    <H1>GeeksForGeeks</H1>
    <h2>DOM HGroup Object</h2>
    <button onclick="myGeeks()">
        Submit
    </button>
    <p id="sudo"></p>
</body>
</html>

输出:

支持的浏览器:

  • 谷歌浏览器 5 及以上
  • Internet Explorer 9 及更高版本
  • 火狐 4 及以上
  • Opera 11.1及更高版本
  • Safari 5 及以上
  • 边 12 及以上



相关用法


注:本文由纯净天空筛选整理自ManasChhabra2大神的英文原创作品 HTML DOM HGroup Object。非经特殊声明,原始代码版权归原作者所有,本译文未经允许或授权,请勿转载或复制。