HTML DOM console.groupCollapsed() 方法
htmlweb developmentfront end technology更新于 2025/9/23 23:40:17
HTML DOM console.groupCollapsed() 方法指定折叠消息组的开头。
语法
以下是语法 −
console.groupCollapsed(label)
此处，label 是组的标签。
示例
让我们看一个 console.groupCollapsed() 方法的示例 −
<!DOCTYPE html>
<html>
<body>
<h1>console.groupCollapsed() Method</h1>
<p>Press F12 key to view the message in the console view.</p>
<button type="button" onclick="normMessage>NORMAL</button>
<button type="button" onclick="CollMessage()">COLLAPSED</button>
<script>
function normMessage(){
console.log("Hello world!");
}
function CollMessage(){
console.groupCollapsed();
console.log("This message will be inside a collapsed group!");
console.log("This message will also be inside a collapsed group!");
}
</script>
</body>
</html>
输出
这将产生以下输出 −
点击"正常"按钮并在开发者选项中查看控制台视图 −
点击"折叠"按钮并在开发者选项中查看控制台视图 −
点击 COLLAPSED 按钮并在开发者选项中查看控制台视图 −
在上面的示例中 −
我们创建了两个按钮 COLLAPSED 和 GROUP，当用户点击它们时，它们将执行 CollMessage() 和 groupMessage() 方法。
<button type="button" onclick="normMessage()">NORMAL</button> <button type="button" onclick="CollMessage()">COLLAPSED</button>
normMessage() 方法包含 console.log() 方法，该方法接收作为参数提供的字符串或对象，并将其显示在控制台上。
function normMessage(){
console.log("Hello world!");
}
CollMessage() 方法包含 console.groupCollapsed() 方法，该方法指定在此之后写入的所有消息都将显示在折叠的消息组中。现在，这些消息在消息组中折叠显示，这与 group() 方法的默认扩展视图不同 −
function CollMessage(){
console.groupCollapsed();
console.log("This message will be inside a collapsed group!");
console.log("This message will also be inside a collapsed group!");
}
相关文章
有用资源
html 参考教程 - 该教程包含有关 html 的更多信息:https://www.cainiaomax.com/html/
