关于html5隐藏显示的信息
HTML5 自动显示和隐藏文字,hidden属性,为何以下方法不能实现?
phidden属性在html5中,只要存在,就是隐藏效果,而不论值为多少/p
10年积累的成都网站建设、网站设计经验,可以快速应对客户对网站的新想法和需求。提供各种问题对应的解决方案。让选择我们的客户得到更好、更有力的网络服务。我虽然不认识你,你也不认识我。但先网站制作后付款的网站建设流程,更有汝南免费网站建设让你可以放心的选择与我们合作。
p要显示元素,要删除hidden属性,而不是设置为false/p
script
type="text/javascript"
async="true"
function
qq_onclick(){
var
text_2=document.getElementById("text_1");
text_2.removeAttribute("hidden");
}
function
qq_close(){
var
text_1=document.getElementById("text_1");
text_1.setAttribute("hidden",true);
}
/script
HTML5初学者笔记
HTML5记录
一、VS code引入插件后运行,终端执行
二、引入外部js文件:
1、js的exports.a = a;方式暂时不知道怎么做
2、直接引入,script之后可以直接使用。参照html-vue项目
3、数据类型
String、Number、Boolean、Null、undefined、symbol、Object、Array、Function
三、 JS显示数据方式:
window.alert()
document.write()
innerHTML=‘’
console.log()
四、 let、const、var
五、全局变量、局部变量注意点
如果变量在函数内没有声明(没有使用 var 关键字),该变量为全局变量。
六、事件:
onchange、onclick、onmouseover、onmouseout、onkeydown、onload…
html dom onclick之类的直接使用,vue是@click,小程序是bindTap
七、 this关键字:
1、在对象方法中, this 指向调用它所在方法的对象。
2、单独使用 this,它指向全局(Global)对象。
3、函数使用中,this 指向函数的所属者。
4、严格模式下函数是没有绑定到 this 上,这时候 this 是 undefined。
5、在 HTML 事件句柄中,this 指向了接收事件的 HTML 元素。
6、apply 和 call 允许切换函数执行的上下文环境(context),即 this 绑定的对象,可以将 this 引用到任何对象。
八、 箭头函数:
1、有的箭头函数都没有自己的 this 。 不适合定义一个 对象的方法。
2、当我们使用箭头函数的时候,箭头函数会默认帮我们绑定外层 this 的值,所以在箭头函数中 this 的值和外层 的 this 是一样的。
3、箭头函数是不能提升的,所以需要在使用之前定义。
4、使用 const 比使用 var 更安全,因为函数表达式始终是一个常量。
九、闭包:
闭包是一种保护私有变量的机制,在函数执行时形成私有的作用域,保护里面的私有变量不受外界干扰。
直观的说就是形成一个不销毁的栈环境。
闭包会持有父方法的局部变量和参数并且不会随父方法销毁而销毁
不必要的闭包只会增加内存消耗
十、 事件
body事件:onload、onunload
元素事件:onclick、onmouseover、onmouseout、onmousedown、onmouseup、onfocus
事件捕获
document.getElementById(‘demo’).addEventListener(‘事件名’, 方法名, 是否捕获传递)
方法名:如果是相应事件,则只可写方法名methodName,写成methodName()则会自动执行
如果方法需要传递参数,则只可以使用匿名函数, function( { methodName(p1, p2) } );
是否捕获传递:默认false,即冒泡传递
IE8和更早版本: x.attachEvent("onclick", myFunction) ;
十一、Window加载,页面声明周期入口
window.onload = function () { }
十二、数据存储
localStorage不会被自动删除,
sessionStorage 网页关闭会自动删除
cookie
sql
manifest文件
区别:
localStorage只要在相同的协议、相同的主机名、相同的端口下,就能读取/修改到同一份localStorage数据。
sessionStorage比localStorage更严苛一点,除了协议、主机名、端口外,还要求在同一窗口(也就是浏览器的标签页)下。
十三、 CSS声明权重(选择器)
内联ID伪类属性类元素/类型通用
!important会改变优先级
十四、 元素隐藏/显示
1、dispatch:none 隐藏 不占用空间
2、visibility:hidden 隐藏,仍然占用空间
3、v-if 存在/不存在
4、v-show 只生成一次,占用内存
十五、 Position
static 默认方式,没有定位
fixed 相对于浏览器窗口固定定位,不占用文档流,其他元素会相对位移
absolute 相对于最近的已定位父元素定位,不占用文档流,其他元素会相对位移
relative 相对于自身的定位
sticky 粘滞定位,基于用户的滚动位置定位
十六、 float
1、只能左右浮动
2、左右浮动,直到外边缘碰到另一个浮动元素
3、浮动之后的元素将围绕它
4、浮动之前的元素不受影响
5、如果是图像浮动,下面的文本流将环绕它
6、clear声明的元素, 属性指定元素两侧不能出现浮动元素。
推荐使用flex布局
十七、 文字显示…
单行
任意行
十八、 box-shadow顺序
十九、 flex布局
容器属性:
属性 / 说明可选值
f方向: lex-direction
换行:flex-wrap
简写:flex-flow
主轴上的对齐方式:justify-content
交叉轴上如何对齐:align-items
多根轴线的对齐方式:align-content。
如果项目只有一根轴线,该属性不起作用
项目item属性:
order:排列顺序,越小越靠前
flex-grow:放大比例,2比1占用的空间大一倍
flex-shrink:缩小比例,默认1,当空间不足时等比例缩小。如果一个项目的属性为0,其他项目都为1,则空间 不足时,前者不缩小
flex-basis:定义了在分配多余空间之前,项目占据的主轴空间
flex :简写
align-self:允许单个项目与其他项目不一样的对齐方式,可覆盖align-items属性。默认值为auto,表示继承父元素的align-items属性,如果没有父元素,则等同于stretch
HTML5如何隐藏和显示页面滚动条?
用CSS可以实现效果。代码如下: html{height:100%;}body{height:100%;overflow:hidden;}//overflow:hidden为隐藏滚动条 body{overflow:scroll;}//如果内容高度大于屏幕就会显示滚动条
HTML5显示和影藏DIV
div的visibility可以控制div的显示和隐藏,但是隐藏后页面显示空白:
style="visibility: none;"
document.getElementById("typediv1").style.visibility="hidden";//隐藏
document.getElementById("typediv1").style.visibility="visible";//显示
在移动端怎么将HTML5中的video标签的控件去掉或者隐藏
两种方法如下:
1、用css隐藏video视频播放控件:
style type="text/css"
video::-webkit-media-controls{
display:none !important;
}
/style
css隐藏原生html5 video controls,这么设置后即使没有设置controls为false,native controls也不会再出现。其他的按钮,包括播放按钮、播放进度条、静音按钮、音量条等,都可以像全屏按钮一样自定义样式。不止是隐藏。
2、用js隐藏video视频播放控件:
script type="text/javascript"
var video=document.getElementById("video");
video.controls=false;
/script
HTML5的video虽然可用controls来展示控件,并进行控制播放暂停等,但是不同的浏览器显示的效果可能不一样,所以很多时候需要使用Dom来进行自定义的一些操作和控制。
扩展资料:
HTML5 video标签中的新属性:
1、autoplay:如果出现该属性,则视频在就绪后马上播放。
2、controls:如果出现该属性,则向用户显示控件,比如播放按钮。
3、height:设置视频播放器的高度。
4、loop:如果出现该属性,则当媒介文件完成播放后再次开始播放。
5、muted:规定视频的音频输出应该被静音。
6、poster:规定视频下载时显示的图像,或者在用户点击播放按钮前显示的图像。
7、preload:如果出现该属性,则视频在页面加载时进行加载,并预备播放。
8、src:要播放的视频的 URL。
9、width:设置视频播放器的宽度。
参考资料来源:百度百科-html5 video
名称栏目:关于html5隐藏显示的信息
本文来源:http://abwzjs.com/article/phgjie.html