html 隐藏按钮并使用 onclick 显示它们
本篇文章将介绍几种隐藏 html 按钮并使用 onclick 事件使它们可见的方法。
使用 css display 属性在 html 中显示隐藏的按钮
我们可以先通过将其显示属性设置为 none 来隐藏 html 按钮。 然后，我们可以使用 javascript 将显示属性设置为内联或阻塞。
显示属性内联或块将显示隐藏的 html 按钮。 display:inline 和 display:block 的区别在于，inline 组件在一行或一行中可以有两个或多个组件。
但是块组件在一行或一行中只能有一个组件。
例如，创建一个按钮并将其命名为 show。 将按钮的 onclick 属性设置为 makechange()。
单击 show 按钮调用 makechange() 函数。 然后创建其他三个按钮并将它们命名为 button1、button2 和 button3。
设置button1的id为b1，button2的id为b2，button3的id为b3。 在 css 中，通过按钮的 id 选择按钮并将显示属性设置为无。
接下来，在 javascript 中，创建一个函数 makechange()。 在该函数内，将每个按钮的显示属性设置为块。
通过其 id 选择特定按钮作为第一个按钮的 document.getelementbyid("b1")。 然后，通过将 document.getelementbyid("b1")style.display 分配给块来设置显示。
对其他两个按钮重复此操作。
示例代码：
<button onclick="makechange();">showbutton>
<button id="b1">button1button>
<button id="b2">button2button>
<button id="b3">button3button>
#b1, #b2, #b3 {
display: none;
}
function makechange() {
document.getelementbyid("b1").style.display = "block";
document.getelementbyid("b2").style.display = "block";
document.getelementbyid("b3").style.display = "block";
}
使用 jquery show() 方法在 html 中显示隐藏的按钮
我们还可以使用 jquery show() 函数来显示隐藏的 html 元素。 show() 函数只显示选中的 display 属性设置为 none 的 html 组件。
它不适用于 visibility 属性设置为 none 的 html 元素。 我们将使用与上面相同的方法来隐藏按钮。
我们还将重用上述方法中使用的 html 结构。
将按钮的显示属性设置为无后，在 javascript 中创建一个 makechange() 函数。 在该函数内，选择带有 id 的按钮并调用 jquery show() 方法 $('#b1, #b2, #b3').show()。
单击显示按钮时，将显示隐藏的按钮。 因此，我们可以使用 jquery show() 方法在 html 中显示隐藏的按钮。
示例代码：
<button onclick="makechange();">showbutton>
<button id="b1">button1button>
<button id="b2">button2button>
<button id="b3">button3button>
#b1, #b2, #b3 {
display: none;
}
function makechange() {
$('#b1, #b2, #b3').show();
}
转载请发邮件至 1244347461@qq.com 进行申请，经作者同意之后，转载请以链接形式注明出处
本文地址：
相关文章
html 中的 role 属性
发布时间：2023/05/06 浏览次数：345 分类：html
-
本篇文章介绍 html role属性。html中 role 属性介绍，role 属性定义描述语义的 html 元素的角色。
在 html 中打印时分页
发布时间：2023/05/06 浏览次数：677 分类：html
-
本篇文章介绍如何在打印 html 页面或内容时强制分页。将 page-break-after 属性设置为 always inside @media print to page break in html
在 html 中显示基于 cookie 的图像
发布时间：2023/05/06 浏览次数：181 分类：html
-
本文介绍如何根据 html 中的 cookies 显示图像。根据 html 中设置的 cookies 显示图像。问题陈述是我们需要根据网页传递的cookie来显示特定的图像。
在 html 中创建下载链接
发布时间：2023/05/06 浏览次数：374 分类：html
-
本文介绍如何在 html 中创建下载链接。使用 download 属性在 html 中创建下载链接.。我们可以使用 html 锚元素内的下载属性来创建下载链接。
html 中的 ::before 选择器
发布时间：2023/05/06 浏览次数：641 分类：html
-
本教程介绍 css ::before 伪元素。css ::before 伪元素。 ::before 选择器是一个 css 伪元素，我们可以使用它在一个或多个选定元素之前插入内容。 它默认是内联的。
在 html 中创建一个可滚动的 div
发布时间：2023/05/06 浏览次数：226 分类：html
-
本篇文章介绍如何使 html div 可滚动。本文将介绍在 html 中使 div 可滚动的方法。 我们将探索垂直和水平滚动，并通过示例查看它们的实现。
html 显示箭头的代码
发布时间：2023/05/06 浏览次数：432 分类：html
-
一篇关于用于显示箭头的 unicode 字符实体的紧凑文章。本文讨论使用 unicode 字符实体在我们的 html 页面上显示不同的字符。 html 中使用了许多实体，但我们将重点学习表示上、下、左、右的三角
在 html 中启用和禁用复选框
发布时间：2023/05/06 浏览次数：281 分类：html
-
本篇文章介绍如何启用和禁用 html 中的复选框。html 中的复选框 复选框是一个交互式框，可以切换以表示肯定或否定。 它广泛用于表单和对话框。
发布时间：2023/05/06 浏览次数：218 分类：html
-
本篇文章介绍了如何在 html 中制作只读复选框。本文是关于如何使 html 复选框控件成为只读组件的快速破解。 但是，首先，让我们简要介绍一下复选框控件。
