下载文档原格式
JS实现“隐藏与显⽰”功能（多种⽅法）下⾯我将效果图展⽰出来：1，通过按钮实现隐藏与显⽰：这个是通过按钮点击实现的隐藏与显⽰，具体代码如下：<!DOCTYPE html><html><head><meta charset="UTF-8"><title>通过按钮实现隐藏和显⽰</title><style type="text/css">.body{margin: 0 auto;}#show{width: 600px;height: auto;font-size: 14px;background-color: #E4C392;display: block;padding: 10px;margin: 0 auto;border-radius: 10px;}#show h2{color: #11C2EE;margin: 0 auto;}.slide{margin: 0 auto;padding: 0;width: 600px;border-top: solid 4px #D6A55C;}.btn-slide{background-color: bisque;width: 80px;height:30px;text-align: center;margin: 0 auto;border-radius: 8px;margin: 0 auto;display: block;}</style><script type="text/javascript">function divShow(){document.getElementById("btnshow").style.display="block";document.getElementById("btnhref").innerHTML ="关闭";document.getElementById("btnhref").href ="javascript:divhidden()";}function divhidden(){document.getElementById("btnshow").style.display="none";document.getElementById("btnhref").innerHTML ="了解";document.getElementById("btnhref").href ="javascript:divShow()";}</script></head><body><div id="show"><h2>通过点击按钮实现隐藏和显⽰</h2><hr /><p>欢迎来到我的博客Jaxzm!⽬前我在学习GoF的设计模式，你想了解么？想要了解的话，请点击按钮。
js实现隐藏和显⽰html通常，我们的⽬的是在点击⼀个按钮时触发显⽰样式的不同；1. ⾸先清楚我们需要默认展⽰的样式，其次需要找到点击某个按钮后需要展⽰的样式；对于默认展⽰的样式：我们需要设置style="display:block"<div class="col-sm-6 deleteType-item" style="display: block"><label class="col-sm-4 control-label"></label><button class="btn btn-primary" onclick="deleteCourse()">删除课程</button></div><div class="col-sm-6 addType-item" style="display: none"><label class="col-sm-4 control-label"></label><button class="btn btn-primary" onclick="addCourse()">增加课程</button></div>对于需要隐藏的样式：需要设置style="display:none"并对不同的类型设置不同的class标签，⽐如删除课程设置的是deleteType-item, 增加课程设置的是addType-item2. 其次需要在不同的条件下展⽰不同的样式，以下⾯的实现为例，我们需要在select框发⽣变化的时候，来确定到底是删课还是加课，onchange="permissionChange()"⽅法正是帮助我们来改变样式的；<div class="col-sm-4"><select class="form-control" id="permissionType" onchange="permissionChange()"><option value="delete">删课</option><option value="add">加课</option></select></div>3. 通过js代码控制显⽰的html，我们获取到select框的id, 并获取到对应的value, 根据1中的className 获取到对应的节点。
网页设计DREAMWEAVER考试题之选择题DREAMWEAVER试卷类型:客观单选,多选,判断)创建试卷时间:2006-5-2219:53:06试卷类型:(单选,多选,判断)创建试卷时间:一,单选题((共25题,每小题2分,共50分.每小题选择结果正确得2分,选择结果错误或不选择均不得分.)共25题)1)Dreamweaver的编辑菜单命令中,Find表示?A,从剪贴板中粘贴当前选区,不带格式B,显示搜索当前文档的对话框C,重复前面的查找操作D,显示替换对话框2)CGI脚本语言中表单从浏览器发给服务器的两种方法是?A,FORM和POSTB,GET和POSTC,ident和GETD,bin和IDENT题号:3)使用什么快捷键可以快速地在当前行的上方插入一行?A,Ctrl+MB,Ctrl+NC,Shift+MD,Shift+N4)在设置图像超链接时,可以在替代文本框中填入注释的文字,下面不是其作用是:A,当浏览器不支持图像时,使用文字替换图像B,当鼠标移到图像并停留一段时间后,这些注释文字将显示出来C,在浏览者关闭图像显示功能时,使用文字替换图像D,每过段时间图像上都会定时显示注释的文字5)表示放在每个定义术语词之前的HTML代码是?A,<dl></dl>B,<dt>C,<dd>D,<ol></ol>6)决定层的显示/隐藏的是哪个属性?A,TagB,VisibilityC,NestingD,WidthandHeight7)Dreamweaver使您可以录制短期使用的临时命令,您还可以从"历史记录"面板重放步骤.当您录制临时命令时,下列说法错误的是:A,您执行步骤时,这些步骤会被录制下来,所以您无需在重放它们之前在"历史记录"面板中选择它们B,在录制过程中,Dreamweaver禁止执行不可录制的鼠标移动(如单击选择窗口中的某个对象,或将页面元素拖动到新位置)C,如果在录制时切换到另一个文档,Dreamweaver不录制在另一个文档中所做的改动,若要随时确定是否在进行录制,请查看鼠标指针D,以上步骤并非都正确题号:8)动态HTML中垂直线条的转换特效类型是?A,VerticalblindsB,HorizontalblindsC,CheckerboardacrossD,Checkerboarddown9)DreamweaverMX2004与定义框架集中蓝色区域表示什么?A,当前文档B,导航条所在文档C,主文档D,显示其他文档的框架10)所有的脚本文件都从什么开始执行?A,doB,mainD,Action11)HTML事件中,OnBounce表示?A,设定触发标记时执行模糊事件B,设定跑马灯到达边缘时触发事件C,设定改变标记时触发事件执行D,设定鼠标左键按一下标记时触发事件执行12)HTML的颜色属性值中,Black的的代码是: A,"#000000"B,"#008000"C,"#C0C0C0"D,"#00FF00"13)Dreamweaver显示替换对话框的快捷操作是? A,Ctrl+HB,Ctrl+FC,Ctrl+ZD,Ctrl+Shift+W14)下面哪个是Dreamweaver的模板文件的扩展名: A,.htmlB,.htmD,.txt15)当表格中跨行合并时,其属性对应的HTML标记为:A,ColspanB,RowspanC,SpanD,Tr16)关于表格的说法,正确的是().A,表格和图层之间不能进行转换B,如果表格中包含合并单元格,也能对其进行排序C,按"Shift"键的同时用鼠标单击欲选定的单元格则可以选定若干分散的单元格D,可以将Excel等软件处理过的数据导入网页上的表格17)在DreamweaverMX00中,设置分框架属性时,要使无论内容如何都不出现滚动条的是怎么设置属性的:A,设置分框架属性时,设置滚动条的scrolling参数为默认B,设置分框架属性时,设置滚动条的scrolling参数为是C,设置分框架属性时,设置滚动条的scrolling参数为否D,设置分框架属性时,设置滚动条的下scrolling参数为自动18)框架中"边缘宽度"的语法是下列哪一项?A,<IMGSRC="URL"BORDER=?>B,<FRAMEMARGINHEIGHT=?>C,<FRAMEMARGINWIDTH=?>D,<TEXTAREAWRAP=OFF|VIRTUAL|PHYSICAL></TEXTAREA> 19)Dreamweaver从剪贴板中粘贴当前文档的快捷操作是?A,Ctrl+Shift+CB,Ctrl+Shift+VC,Ctrl+FD,F320)在Dreamweaver中,下面关于首页制作的说法错误的是:A,首页的文件名称可以是index.htm或index.htmlB,可以使用布局表格和布局单元格来进行定位网页元素C,可以使用表格对网页元素进行定位D,在首页中我们不可以使用css样式来定义风格21)精确定位网页中各个元素的位置的方法有:A,表格B,层C,表单D,帧22)默认情况下,Dreamweaver会使用哪个HTML标签创建层?A,LayerB,iLayerC,DIVD,Span23)Dreamweaver的站点(Site)菜单中,Get表示:A,将选定文件从远程站点传输至本地文件夹B,断开FTP连接C,将远程站点中选定文件标注为"隔离"D,将选定文件从本地文件夹传输至远程站点24)在Dreamweaver中,下面关于数据绑定的说法错误的是:A,数据绑定提供了网上一种利用数据的方法B,不能对数据库直接进行写入操作C,它需要你拥有CGI或ASP等权限D,它的操作位于服务器端25)在Dreamweaver中,下面关于清除Word生成的HTML格式的说法错误的是:A,Microsoft公司的字处理软件Word也可以制作网页文件B,Word制作的网页文件包含某些标准的HTML不支持的格式C,可以通过Dreamweaver的命令菜单,选择清理word生成的HTML 命令对Word制作的网页文件进行优化D,Dreamweaver不会自动侦测当前打开的文件是使用哪个版本的Word生成的二,多选题((共10题,每小题3分,共30分.每小题选择结果正确得3分,漏选,错选或不选均不得分.)共10题)26)在"页面属性"对话框中,我们可以设定的属性有:A,默认字体家族B,字号大小C,背景颜色D,超链接数量27)当在Dreamweaver中浏览到一个文件时,可以对其执行下列哪些操作?A,在Dreamweaver或其他应用程序中打开文件B,重命名文件C,复制文件D,删除文件28)Dreamweaver为创建新文档提供了若干选项.我们可以创建以下哪些文档?A,新的空白文档或模板B,.xls文档C,基于Dreamweaver附带的某预定义页面布局的文档D,基于现有模板的文档29)我们在属性面板中可以设置的层的属性包括:A,Z轴B,宽度C,边框颜色D,可见性30)DreamweaverMX2004提供了下列哪几种文档窗口视图? A,设计视图B,混合视图C,拆分视图D,代码视图31)div和span标签之间的区别在于:A,没有本质区别B,不支持层的浏览器在div标签的前后放置额外的换行符C,div标签是块,而span标签则是内联元素D,IE只支持div,而不支持span、32)下列关于嵌套层的说法正确的是:A,嵌套层是其代码包含在另一个层中的层B,嵌套通常用于将层组织在一起C,嵌套层随其父层一起移动,并且可以设置为继承其父级的可见性D,可以打开"嵌套"选项,这样,当您从另一个层内开始绘制层时将实现层的自动嵌套33)到此有关使用保存命令与重放步骤的说法正确的是:A,Dreamweaver使您可以录制短期使用的临时命令,您还可以从"历史记录"面板重放步骤B,当您录制临时命令时,您执行步骤时,这些步骤会被录制下来,所以您无需在重放它们之前在"历史记录"面板中选择它们C,当您录制临时命令时,在录制过程中,Dreamweaver禁止执行不可录制的鼠标移动(如单击选择窗口中的某个对象,或将页面元素拖动到新位置)D,当您录制临时命令时,如果在录制时切换到另一个文档,Dreamweaver不录制在另一个文档中所做的改动.若要随时确定是否在进行录制,请查看鼠标指针34)Dreamweaver新增了一个代码片段面板,此面板可以储存什么代码:A,ASP代码B,JSP代码C,JavaScript代码D,HTML代码35)关于显示和隐藏不可见元素的说法中正确的是:A,有些HTML代码在浏览器中没有可见的表示形式.例如,comment标签不在浏览器中出现.但是,此标签在创建能够选择,编辑,移动和删除这类不可见元素的页面时很有用B,Dreamweaver使您可以指定在"文档"窗口的"设计"视图中是否显示标记不可见元素位置的图标C,若要指明在选择"查看">"可视化助理">"不可见元素"时显示哪些元素标记,可以在"不可见元素"首选参数中设置选项D,可以使用"插入"栏"常用"类别中的按钮创建某些不可见元素(如注释和命名锚记)三,判断题((共10题,每小题2分,共20分.每小题判断结果正确得2分,判断结果错误不得分也不扣分.)共10题)36)我们可以在不设置Dreamweaver站点的情况下编辑网页文件. A,对B,错37)站点无大小,可以大到一个网站,小到一个网页.A,对B,错38)要上传的网页的文件名可以使用中文.A,对B,错39)文档的编码方式确定如何在浏览器中显示文档.DreamweaverMX2004字体首选参数使您能够以喜爱的字体和大小查看给定的编码,而不影响其他人在浏览器中查看时文档的显示方式. A,对B,错40)在Windows中,我们可以将"文档"窗口最大化以便它填充集成窗口的整个文档区域.当"文档"窗口最大化时,我们仍然可以调整它的大小.A,对B,错41)DreamweaverFTP实现方案可能不适用于某些代理服务器,多级放火墙服务器访问.A,对B,错42)在Dreamweaver中,可以导入在MicrosoftWord中保存为HTML 文件的文档,然后使用"清理Word的HTML"命令删除Word生成的无关HTML代码.A,对B,错43)当表格的对齐方式设置为"默认"时,其他内容不显示在表格的旁边. A,对B,错44)在DreamweaverMX2004中可以导入XML模板,表格式数据,Word及Excel文档等应用程序文件.A,对B,错45)自定义CSS样式可以自动地应用在相应文档中,而HTML标记样式和CSS选择器样式则必须手动应用于文档中的各种对象.A,对B,错。
html隐藏元素的方法HTML隐藏元素有多种方法，包括使用CSS属性、使用JavaScript代码等。
下面将为您详细介绍一些常用的方法。
1.使用CSS属性在CSS中，可以使用display属性来隐藏元素。
常见的取值有以下几种：- none：完全隐藏元素，不占用空间；- block：将元素显示为块级元素，并占用空间；- inline：将元素显示为内联元素，并占用空间；- inline-block：将元素显示为内联块级元素，并占用空间。
可以通过在HTML元素上直接设置样式来隐藏元素，例如：```html<div style="display: none;">这是一个隐藏的div</div>```也可以在CSS样式表中定义样式，然后将其应用于需要隐藏的元素，例如：```html<style>.hiddendisplay: none;}</style><div class="hidden">这是一个隐藏的div</div>```2.使用CSS类通过添加或移除样式类，可以控制元素的可见性。
例如，定义一个名为"hidden"的类来隐藏元素：```html<style>.hiddendisplay: none;}</style><div class="hidden">这是一个隐藏的div</div>```然后使用JavaScript的classList属性来添加或移除该类：```javascriptvar element = document.getElementById("myElement");element.classList.add("hidden"); // 添加类element.classList.remove("hidden"); // 移除类```这样就可以通过添加或移除类来改变元素的可见性。
html hidden用法
HTML中的hidden属性可以用来隐藏一个元素，但是该元素仍然存在于页面中。
这在很多情况下都很有用，比如说：
1. 隐藏表单元素：有些表单元素可能不需要用户输入，但是用来传递数据给后台。
这时可以用hidden属性来隐藏这些元素。
例如：
<input type='hidden' name='user_id' value='12345'>
2. 控制页面的显示：有时我们需要根据用户的操作来动态改变页面的显示，可以使用hidden属性来实现这个功能。
例如：
<div id='loading' hidden>正在加载中...</div>
3. 保留一些数据：有时我们需要在页面中保存一些数据，但是不希望用户看到它们。
可以使用hidden属性来实现这个功能。
例如：
<div id='data' hidden>{ 'name': 'Tom', 'age': 25 }</div> 需要注意的是，hidden属性只是将元素隐藏，但是它的内容仍然可以在页面源代码中被看到。
如果需要更加安全的隐藏内容，可以使用其他技术，比如加密或者后台验证等。
- 1 -。
密码显⽰与隐藏效果html+css+js此⽂转载⾃：https:///luo1831251387/article/details/112914339眼睛按钮的样式,⼀开始是闭眼的图⽚:.conceal{position: absolute;top: 15px;right: 15px;width: 30px;height: 30px;background-image: url(mima/xianshi.png);background-size: 100% 100%;cursor: pointer;}js实现,点击⼩眼睛按钮时进⾏判断,通过改变type属性的值为text或者password⽽实现字符是呈现显⽰还是隐藏状态,按钮通过新类的添加或者移除呈现眼睛状态的呈现: <script>var password = document.getElementById('password');var anniu = document.getElementById('conceal');anniu.addEventListener('click',function(){if(password.type==='password'){password.setAttribute('type','text');anniu.classList.add('yincang');}else{password.setAttribute('type','password');anniu.classList.remove('yincang');}})</script>setAttribute() ⽅法添加指定的属性，并为其赋指定的值。
classList属性：add(class1, class2, …) 在元素中添加⼀个或多个类名。
实验18 显示—隐藏层通过实验，掌握显示—隐藏层动作的基本使用方法，对显示—隐藏层事件的设置比较清晰的理解。
说明“显示—隐藏层”动作可以显示、隐藏或恢复一个或多个层的默认可见性。
此动作作用于在用户与页进行交互显示信息。
“显示—隐藏层”还可用于创建预先载入层，即一个最初挡住网页内容的较大层，在所有页组件都完成载入后该层即消失。
对应知识点：●行为面板的使用●设置行为事件●显示—隐藏层对应《Macromedia Dreamweaver MX2004 标准教程》第13章的内容。
实验课时：2课时●6张风景图片（可在本书配套光盘exp17- 19\sucai18文件夹中查找使用）。
1.启动Dreamweaver 软件，选择菜单“文件”→“新建”命令，创建HTML网页。
2.在属性面板中单击“页面属性”按钮，在对话框中设置大小为“12像素”，文本颜色为白色(色标值为#FFFFFF)，背景颜色为浅绿色（色标值为#C8F1AF）。
如图18—1所示。
3.单击“确定”按钮，返回网页编辑窗口。
在文档面板“标题”编辑框内输入“风光图片欣赏”。
图18-1 设置页面属性对话框4.按CTRL+S 键保存网页在一新建文件夹中，命名为“page18.htm”。
5.从本书配套光盘exp17-19\sucai18文件夹中复制6张风光图片文件，粘贴到网页相同文件夹下的“images”文件夹内。
6.在网页空白处单击，按两次Enter键，使插入点与顶部空两行。
单击插入面板的“表格”按钮，在“表格”对话框中设置行数为2，列数3，表格宽度为500像素，边框粗细，单元格边距和单元格间距均为0 ，单击“确定”按钮，表格插入网页中，如图18-2所示。
7.拖动鼠标，选择第1行的3个单元格，在属性面板中单击“合并所选单元格”按钮，在“垂直”下拉列表中选择“顶端”选项，在“高”编辑框内输入“50”。
8.在此单元格内输入文字“风光图片欣赏”。
拖动鼠标选中文字，在属性面板中设置字体为“黑体”，大小为“24像素”，颜色为“绿色（色标值为# 009900）”，并单击“粗体”按钮和“居中对齐”按钮，效果如图18-3所示。
