details——内容可伸缩的标签

最新推荐文章于 2022-04-18 17:43:04 发布
最新推荐文章于 2022-04-18 17:43:04 发布
阅读量334 收藏
点赞数
分类专栏： html5基础
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_21119773/article/details/51594550
版权 
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<body>
		<details id="details" οnclick="onc(this)">
			<summary>我爱我家</summary>
			<P style="display: none;" id="p">超级好看的温情的哭戏，你准备和我一起哭了吗？</P>
			
		</details>
	</body> 
	
	
	<script>
	function onc(details){
		var p=document.getElementById("p");
		if(details.open){
			p.style.display="none";
		}else{
			p.style.display="block";
		}
		
	}
	</script>
</html>

点击summary标签，可将<p>元素伸缩或显示


qq_1913284695
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
antd可伸缩列源码.zip
11-20
本附件对应本人写的原创技术文章《antd可伸缩列实现优化》，该文章在antd官网实现可伸缩列宽的基础上进行优化。文章链接：https://blog.csdn.net/bin_zi_123/article/details/103163225
标记语言——锚点
09-28
虽然实用，但这种方法在语义上略显不足，因为它创建了一个没有实际内容的`<a>`标签。 2. **方法B：全部在名称之内** 方法B将`<a>`标签包裹在需要链接的元素（如标题`<h2>`）外部，既表明了链接的位置，也保留了...
《HTML5开发手册》——2.3　初学者“菜谱”：使用details元素创建可伸缩控件
weixin_33790053的博客
05-02 99
本节书摘来自异步社区《HTML5开发手册》一书中的第2章，第2.3节,作者： 【美】Chuck Hudson , 【英】Tom Leadbetter 更多章节内容可以访问云栖社区“异步社区”公众号查看。 2.3　初学者“菜谱”：使用details元素创建可伸缩控件 在本书撰写时，只有Chrome 13+支持新的details元素。但愿其他浏览器能尽快支持...
vue.js基础01--基础用法及内部指令
muzidigbig的博客
07-25 4325
一、vue的概述及vue的入门小实例 vue.js是当下很火的一个JavaScript MVVM库，它是以数据驱动和组件化的思想构建的。相比于Angular.js，Vue.js提供了更加简洁、更易于理解的API，使得我们能够快速地上手并使用Vue.js。 如果你之前已经习惯了用jQuery操作DOM，学习Vue.js时请先抛开手动操作DOM的思维，因为Vue.js是数据驱动的，你无需手动操作D... v-if和v-for为什么不建议同时使用
vue语法说明
JNC1999的博客
06-13 413
1、获得Vue支持: <script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script> 2、获得初始化Vue函数获取文本数据及自定义函数: <div id="vue_det"> <!-- 获得data数据site --> <h1&g...
js中function(){}中小括号中的内容到底是什么
zwy122的博客
10-12 7771
var btn1=document.getElementById("btn1"); btn1.onclick=function(a){ alert(a); }      头一次注意到原生js中后面括号中的内容容易搞混，其实内容和可以传一个变量，而同时也是一个事件对象，所以上面的一个测试代码会在点击事件触发后弹出[object MouseEvent]这个事件对象的名称。
网页排版布局方法加伸缩布局
qq_43712187的博客
04-18 1027
一、表格布局 设置表格给各个单元填充即可 二、frameset框架 特点: 替代了body标签 作用: 主要是用来搭建整个网站的布局框架 快速 横向框架 rows和纵向框架cols 内嵌框架 iframe 不会替代body 可以写在body中 注：在HTML5已经淘汰了 三、浮动定位加css+div来布局 四、伸缩布局 如何让水平排版 ----前提没有给父元素设置高度 ...
Android 伸缩布局
06-24
`blog.csdn.net/Crystal_xing/article/details/93498280`这篇博文中，作者详细介绍了如何实现一个简单的伸缩布局。主要步骤包括： 1. **定义扩展和收缩状态**：首先，定义两种状态，比如完全展开和完全收缩。然后，...
Python itertools——高效迭代.ipynb
04-02
Python itertools——高效迭代 https://xercis.blog.csdn.net/article/details/105200310 Python内置库itertools可以高效创建一系列迭代器，使代码更简洁。本文一一讲解功能及原型，并给出具体使用
QTabWidget实现的炫酷标签工具栏+源码
最新发布
05-28
用法链接：https://menghui666.blog.csdn.net/article/details/139276655?spm=1001.2014.3001.5502 该项目基于QTabWidget和QTabBar实现了灵活的标签工具栏，主要包含如下功能： 1、标签栏可以收起，可以展开 2、...
HTML5教程之details展开收缩标签的应用
yixuan_1的专栏
09-26 1420
HTML5教程之details展开收缩标签的应用 details标签的出现，为我们带来了更好的用户体验，不必为这种收缩展开的效果再编写JS来实现。 注：目前仅Chrome支持此标签。 details有一个新增加的子标签——summary，当鼠标点击summary标签中的内容文字时，details标签中的其他所有元素将会展开或收缩。 detalis标签： 案例1：
自定义html5中的details元素
zgrbsbf的专栏
10-24 2133
html5中的details的功能很好，但是默认的样式不好看…尝试修改。 ::-webkit-details-marker伪元素修改 summary前面的三角形 summary的::before和::after伪类制作一个 + - 表示的开关 使用details的open属性选择器在开关之间进行却换 下面是样式文件： ::-webkit-details-marker { ...
你知道 details 标签的妙用吗?
weixin_49115895的博客
04-18 2162
details 标签 在以往的项目中去实现如下效果,我一般是使用 HTML + JS 去完成的，但今天我了解到一个很便捷的方法可以帮助我只使用 HTML 就可以快速的完成如下效果。那就是 HTML5 中新增的 detils 标签。 基本介绍 实现代码如下： <details> <summary> 文章概要 </summary> <div>文章内容文章内容文章内容文章内容文章内容文章内容文章内容文章内容</div&g
$(function(){})什么时候执行
热门推荐
sadleaflzh的专栏
08-11 4万+
$(function() {})，即$(document).ready(function()，什么时候执行？以此为准，真理   $(function() { //执行操作   });   $(function() {}) 是$(document).ready(function()的简写。 这个函数什么时候执行的呢？ 答案：DOM加载完毕之后执行。   DOM是什么？DOM就是...
vue.js学习笔记（一）基础学习
zhaofengdeng的博客
06-23 552
一.Vue.js介绍 Vue.js是一个js插件 官方解释： Vue.js（读音 /vjuː/, 类似于 view） 是一套构建用户界面的渐进式框架。 Vue 只关注视图层， 采用自底向上增量开发的设计。 Vue 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。 个人理解： 通过操作js对象来操作...
JavaScript学习总结(十五)——Function类
程序员蒋老湿的博客
04-12 311
在JavaScript中，函数其实是对象，每个函数都是Function类的实例，既然函数对象，那么就具有自己的属性和方法，因此，函数名实际上也是一个指向函数对象的指针，不会与某个函数绑定。 一、函数的声明 方式一：常规方式 1 function sum1(num1,num2){ 2 return num1+num2 3 } 方式二：函数表达式 1 var
Function
weixin_44343449的博客
06-26 151
声明方式创建函数 例: function fun(){ console.log(1) } fun() function fun(){ console.log(2) } fun() 结果：2，2 分析： 函数名相当于变量。函数就是对象。 函数会声明提前。（我觉得是函数体提前。） 当第一个fun创建时，它引用的是函数体的地址。 第二个fun再出现时，变量不会被重复创建。 所以，内存里不会再创建f...
使用std::function作为函数入参
hzy925的博客
03-24 1万+
1. 关于std::function()在C语言的时代，我们可以使用函数指针来吧一个函数作为参数传递，这样我们就可以实现回调函数的机制。到了C++11以后在标准库里引入了std::function模板类，这个模板概括了函数指针的概念函数指针只能指向一个函数，而std::function对象可以代表任何可以调用的对象，比如说任何可以被当作函数一样调用的对象。当你创建一个函数指针的时候，你必须定义这个...
$(function(){ });
zhangfeng1742的专栏
04-09 3743
$(document).ready(function(){ ... });可以简写成：$(function(){ ... });是在页面DOM加载完成后执行的代码，而window.onload需要页面DOM和图片都加载完成后才执行，所以前者效率更高 。$(document).ready() 里的代码是在页面DOM都加载完才执行的，如果把代码直接写到script标签里，当页面加载完这个s...
js获取html标签中的内容
07-28
要使用JavaScript获取HTML标签中的内容，可以使用以下方法： 1. 使用innerHTML属性：innerHTML属性返回指定元素内的HTML内容，包括标签和文本。例如，要获取id为"box"的div元素中的内容，可以使用以下代码： ```javascript var box = document.getElementById('box'); var content = box.innerHTML; console.log(content); ``` 这将输出div元素中的所有内容，包括标签和文本。 2. 使用innerText属性：innerText属性返回指定元素内的纯文本内容，去除了所有HTML标签。例如，要获取id为"box"的div元素中的纯文本内容，可以使用以下代码： ```javascript var box = document.getElementById('box'); var text = box.innerText; console.log(text); ``` 这将输出div元素中的纯文本内容，不包括任何HTML标签。 3. 使用textContent属性：textContent属性返回指定元素内的文本内容，保留了文本的格式，但去除了所有HTML标签。例如，要获取id为"box"的div元素中的文本内容，可以使用以下代码： ```javascript var box = document.getElementById('box'); var text = box.textContent; console.log(text); ``` 这将输出div元素中的文本内容，保留了文本的格式，但不包括任何HTML标签。 请注意，以上方法都是通过JavaScript来获取HTML标签中的内容。具体使用哪种方法取决于你需要获取的内容以及你对内容的处理要求。 #### 引用[.reference_title] - *1* *2* *3* [JavaScript离别之作——HTML元素操作](https://blog.csdn.net/qq_51547965/article/details/123672845)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insert_down1,239^v3^insert_chatgpt"}} ] [.reference_item] [ .reference_list ]
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值