html、javascript隐藏事件解释-Toy模板网

这篇具有很好参考价值的文章主要介绍了html、javascript隐藏事件解释。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

简介：

Javascript简介

Javascript 是一种基于文本的编程语言，主要用于Web开发。它是WWW(万维网)的核心技术之一。

通过使用 Javascript，程序员可以创建交互式和响应式Web元素并增强网站的UI。Javascript 在客户端Web开发中非常流行，以至于互联网上超过97%的网站都将其用于客户端行为。弹出窗口、图像滑块、站点导航菜单、选项卡、表单验证是用于Web开发的Javascript的一些示例。

HTML简介

HTML是超文本标记语言的首字母缩写，它是用于创建网页和Web应用程序的标准标记语言。HTML描述了网页的结构，浏览器从服务器接收HTML页面，然后将文档呈现到屏幕上。

HTML包含多个元素，这些元素告诉浏览器内容的外观。例如，

标签定义了一个段落，

定义了web文档的标题，定义了可见的页面内容，<table>定义了一个表格等等。HTML可以嵌入脚本程序如JS程序会影响网页的内容和行为。此外，它可以包含 CSS(层叠样式表)来改善网页的布局和外观。</table>

1. 使用CSS实现隐藏显示

CSS是一种用于控制Web页面样式的语言，它可以通过设置display属性来实现元素的隐藏和显示。当display属性被设置为none时，元素就会被隐藏；当display属性被设置为block或inline等其他值时，元素就会被显示。

下面是一个使用CSS实现隐藏显示的示例：

<style>
.box {
display: none;
}
.button:hover + .box {
display: block;
}
</ style>
<button class="button">显示/隐藏内容</button>
<div class="box">这是要显示/隐藏的内容</div>

以上代码中，我们定义了一个class为box的元素，并设置其display属性为none，使其默认被隐藏。然后定义了一个class为button的按钮，当鼠标滑过此按钮时，就可以显示box元素，使用+选择器可以选中紧跟在button后面的box元素。

2. 使用JavaScript实现隐藏显示

JavaScript是一种常用于Web页面交互的脚本语言，它可以通过控制元素的style属性来实现隐藏和显示。当style.display属性被设置为none时，元素就会被隐藏；当style.display属性被设置为block或inline等其他值时，元素就会被显示。

下面是一个使用JavaScript实现隐藏显示的示例：

<button onclick="toggle()">显示/隐藏内容</button>
<div id="box" style="display: none; ">这是要显示/隐藏的内容</div>
<script>
function toggle() {
var box = document.getElementById ( "box");
if (box.style.display === "none") {
box.style.display = "block";}else i
box.style.display = "none";
}
}
</script>

以上代码中，我们定义了一个id为box的元素，并设置其style.display属性为none，使其默认被隐藏。然后定义了一个toggle()函数，用于控制box元素的显示和隐藏。当按钮被点击时，toggle()函数会判断box元素的当前状态，如果为隐藏状态，则将其显示出来；如果为显示状态，则将其隐藏起来。

3. 使用jQuery实现隐藏显示

jQuery是一个常用于Web页面开发的JavaScript库，它可以大大简化JavaScript的编码复杂度。使用jQuery的hide()和show()方法可以实现元素的隐藏和显示。

下面是一个使用jQuery实现隐藏显示的示例：


<button id="toggle">显示/隐藏内容</button>
<div id="box" style="display: none;">这是要显示/隐藏的内容</div>
<script src="https: / /code.jquery.com/jquery-3.5.1.min.js"></script><script>
$( "#toggle").click(function() {
$("#box" ).toggle();
});
</script>

以上代码中，我们使用了jQuery库，并绑定了toggle()函数到toggle按钮的click事件上。当按钮被点击时，toggle()函数会根据box元素的当前状态来判断是显示还是隐藏。

4.visible与hidden

.$("#id").css('visibility','hidden');//元素隐藏

$("#id").css('visibility','visible');//元素显示

CSS visibility 属性规定元素是否可见。

collapse　在表格元素中使用时，此值可删除一行或一列，但它不影响表格的布局。被行或列占据的空间会留给其他内容使用。如果此值被用在其他的元素上，会呈现为 “hidden”。
inherit　从父元素继承 visibility 属性的值。

注意：
在一些DOM操作中两者的区别:
display:none —不为被隐藏的对象保留其物理空间，即该对象在页面上彻底消失，通俗来说就是看不见也摸不到。
visible:hidden— 使对象在网页上不可见，但该对象在网页上所占的空间没有改变，即它仍然具有高度、宽度等属性，通俗来说就是看不见但摸得到。文章来源地址https://www.toymoban.com/news/detail-782122.html

到了这里，关于html、javascript隐藏事件解释的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！