JavaScript基础13-使用css属性overflow进行展开闭合

最新推荐文章于 2024-12-01 11:09:04 发布
原创 最新推荐文章于 2024-12-01 11:09:04 发布 · 385 阅读 · 1 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文介绍如何使用CSS和JavaScript实现DIV元素的展开和隐藏效果。通过设置class属性选择器，结合JavaScript的点击事件，可以轻松实现内容的动态显示与隐藏。具体包括：CSS代码用于限制DIV的高度并定义不同状态的样式；JavaScript则负责绑定点击事件，通过简单的if判断切换DIV的显示状态。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

进行 展开和隐藏效果展示的DIV ,并绑定onclik事件；

 

css代码 使用 class属性选择器：给不同的属性 赋予不同的样式代码：

JavaScript代码，绑定点击事件，事件逻辑简单if判断，如果展示就隐藏，如果隐藏就展开

效果：

隐藏超过css文件限制的超过8px 高度的内容；点击后 改变div的 class值和样式，展示隐藏掉的内容；

 

CSS & JS 关于设置 overflow: auto； 元素无法监听滚动问题
Thinking anywhere anytime.
03-02 1460
是否是 height:100% 搞的鬼 <!DOCTYPE html> <html> <head> <title>Test</title> <style type="text/css"> #box{ height: 100%; overflow: auto; } h1{ height: 100px; } </style> </head> <body> <d
js锚点定位_overflow属性详解，利用CSS实现锚点定位
weixin_39612677的博客
11-29 1503
1.overflow的裁剪界线——border-boxoverflow属性用于指定块容器元素的内容溢出时的表现方式——滚动，裁剪，自适应。“BFC的最佳结界”只是其衍生出来的特性，“裁剪”才是其本职工作。在使用overflow做裁剪工作的时候需要注意裁剪的边界时border box的内边缘，来看下面的例子。<div style="width: 200px;height: 200px;over...
javascript设置overflow-y
热门推荐
爱读书的旅行者
09-18 1万+
css里可以设置overflow-y:scroll 但是javascript中应这样设置 overflowY:scroll 比如，显示博文的时候超过规定高度就让其显示滚动条，代码如下 $(function(){     var height = document.getE
js 利用overflow属性，设置滚动条，隐藏或设置样式
weixin_42197834的博客
09-20 1万+
页面滚动条设置 overflow属性 想要 在页面哪个部分 或者 哪个盒子添加滚动条， 可以利用 overflow属性，先看看它的基本属性。 浏览器支持情况如上图。 属性值有如下： 想要添加滚动条，必须给盒子添加高度（*） 例如 在x轴上隐藏内容，y轴上显示滚动条 .div { height: 300px overflow-x: hidden; overflo...
overflow溢出属性、定位、前端基础之JavaScript
m0_71292438的博客
11-01 1247
JavaScript中的函数和Python中的非常类似，只是定义方式有点区别。// 普通函数定义");// 带参数的函数// 内置的arguments对象// 带返回值的函数sum(1, 2);// 调用函数// 匿名函数方式sum(1, 2);// 立即执行函数 书写立即执行的函数，首先先写两个括号()()这样防止书写混乱})(1, 2);ES6中允许使用“箭头”（=>）定义函数。// 等同于return v;// 等同于// 等同于。
Javascript通过overflow控制列表闭合与展开的方法
10-24
DisplayList()">球星列表5</dt> 罗纳尔多</dd> 贝克汉姆</dd> 齐达内</dd> 内马尔</dd> 巴蒂斯图塔</dd> 梅西</dd></dl></div></body>上述代码展示了一个使用JavaScript和CSS通过`overflow`属性控制列表闭合与展开的...
JavaScript内部测试-笔试试题和答案.doc
11-13
JavaScript内部测试-笔试试题和答案.doc 本资源提供了 JavaScript 内部测试的笔试试题和答案，涵盖了 HTML、CSS、JavaScript 等多个方面的知识点。下面将对每个问题进行详细的解释和分析： 1. 关于 XHTML 1.0 规定...
前端基础总结--CSS
chenyouleww的博客
07-08 690
前端 1.1前端方向 所谓前后端本身就是 Web 开发中，为了区分在服务器上运行的和在浏览器上运行的东西而出现的定义。 前端开发的体系划分，在我看来，就是两种，第一种就是ui实现的，不重业务逻辑，动态交互的。第二种就是各种业务逻辑，动态交互，数据处理的。这是很明显区分你要做什么任务，以及开发时的顺序的。 一般的我们说前端都是小前端，就是web端。 大前端一般是指web端，小程序端，移动端（Android，iOS），Windows端，macOS端，Linux端 1.2前端的技术 前端能做什么？ 前端能做你上网
JavaScript内部测试-笔试试题和标准答案.doc
09-30
JavaScript内部测试涵盖了许多核心概念，包括HTML和CSS的使用，以及JavaScript的基本操作。以下是这些试题涉及的知识点的详细解释： 1. XHTML 1.0 的级别声明：XHTML 1.0规范定义了三种文档类型，分别是Strict...
点击切换样式表实现内容折叠与展开(overflow)
weixin_34127717的博客
09-13 147
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "HTML://www.w3.org/TR/xHTML1/DTD/xHTML1-transitional.dtd"> <HTML xmlns="HTML://www.w3.org/1999/xHTML"> <head&...
CSS+HTML实例集合一，改变字体(样式，大小)，overflow布局属性(如显示隐藏文字等)，列表的展开闭合
知识搬运工，资料任你拿，包括书籍、电影、电视剧、网站、软件等，VX公人人人号：向前书局
10-08 4093
改变字体(样式，大小) 无标题文档 a:link,a:visited{/*设置点击前，点击后a标签样式一样*/ color:#FF9900;/*颜色*/ text-decoration:none;/*文本样式设置为none，即没有样式*/ font-size:12px;/*字体大小*/ } a:hover{ color:#0099FF;/*设置鼠标悬停时，
Jquery 浮起的滚动条展开与隐藏
weixin_44540436的博客
08-07 440
插件 <script src="js/jquery.nicescroll.min.js"></script> 下载插件连接 https://www.bootcdn.cn/jquery.nicescroll/ HTML代码 <div style="width: 32%;z-index: 1;overflow: auto;"> <div class="ce...
CSS overflow 内容溢出时的显示方式
很酷的站长的博客
12-07 4144
1. overflow 属性介绍css 中的 overflow 属性用于控制内容溢出元素框时的显示方式。当元素框中的内容溢出时，无非就是两种情况: 、2. overflow 属性的值3. 自定义 overflow 的滚动条以前不知道 overflow 的滚动条样式是可以修改的，最近做的一个官网项目中前端提供的静态模板自定义了滚动条样式，才得知还有这么个东西，在此记录一下自定义滚动条的写法，这样可以更好的理解用法，虽然下次使用还要来这里看首先，先来做一个有滚动条的容器macOS 中滚动条的默认样式:可以使用以
第八周学习笔记
最新发布
2401_87845453的博客
12-01 642
那么transformZ的值越接近200，就是离的越近，看上去也就越大，超过200就看不到了，因为相当于跑到后脑勺去了，你不可能看到自己的后脑勺。align-self属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性，默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于strentch。设置子项在侧轴上的排列方式，并且只能用于子项的出现，换行的情况，在单行下无效果。该属性是控制子项在侧轴上的排列方式，在子项为单向的时候使用。
【HTML & CSS & JavaScript】overflow属性滚动机制
李留白
02-05 924
参数是scroll时候，必会出现滚动条。 参数是auto时候，子元素内容大于父元素时出现滚动条。 参数是visible时候，溢出的内容出现在父元素之外。 参数是hidden时候，溢出隐藏。
javascript报错BigNumber的overflow错误？怎么解决
qq_41083105的博客
07-16 1169
最近做项目的时候碰到的这个问题，起初我也很迷惑，询问同事之后，一下点醒我。 问题描述 需求是，函数的参数接受input框中的值，我在input框中输入了1e18的数，这个时候函数是可以正常接受这个参数进行运行的。 可是，如果我是实现将这个input框中的值保存下来，事先说明，这个时候保存的值是小数，之后需要乘1e18，就是这样，我将这样处理之后的数传到了函数的参数中进行处理，但是控制太却报了BigNumber的错误，告诉我overflow了。 ...
前端页面 div+css内容太长，实现点击展开余下全文（修改版）
阿……莫西林杀菌室
09-27 1万+
&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;文章高度展开&lt;/title&gt; &lt;style&gt; .content{ padding:10px 12px 48px; f
js出现allocation size overflow以及字符串拼接优化
一屁小肥羊的专栏
05-24 5824
好久没做过WEB前端了,今天无意中,ajax获取后台后数据,循环遍历,做元素拼接,后在jsp页面展示,字符串拼接长一点了,就出现了allocation size overflow异常,这还是第一次碰到, 网上一翻搜索,好像是firefox新版本特性吧.(其实,我做了双foreach循环..内部循环和外部循环使用了相同的索引i,引起的) 但是,在查找中却发现了这新方法,感脚还不错,记录下...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值