js怎么控制a标签的显示和隐藏

JavaScript010

js怎么控制a标签的显示和隐藏,第1张

如果要让a标签隐藏可以通过如下方式:<aid="anchor"href="#"style="display:none">锚点连接</a>如要要让不显示的a标签显示只需要将style中的"display:none"这个属性给去掉;因此就可以通过js来动态的设置这个a标签的属性达到控制标签显示和隐藏切换的效果。<SCRIPTLANGUAGE="JavaScript">functionhide(){ document.getElementById("anchor").style.display="none"}functionshow(){ document.getElementById("anchor").style.display="block"}</SCRIPT>‍JavaScript是一种直译式脚本语言,是一种动态类型、弱类型、基于原型的语言,内置支持类型。它的解释器被称为JavaScript引擎,为浏览器的一部分,广泛用于客户端的脚本语言,最早是在HTML(标准通用标记语言下的一个应用)网页上使用,用来给HTML网页增加动态功能。在HTML中标签<a></a>或者大写字母A。其中的a(或者A)是anchor的缩写。anchor['æŋkə]基本解释是.:锚,铁锚的,网页当中的所有连接跳转基本上都是通过a标签来实现的。在html文档中,基本上所有的标签节点都可以通过样式控制其显示和隐藏的属性,当然A标签也不例外。

用JavaScript隐藏控件的方法有两种,分别是通过设置控件的style的“display”和“visibility”属性。当style.display="block"或style.visibility="visible"时控件或见,当style.display="none"或style.visibility="hidden"时控件不可见。不同的是“display”不但隐藏控件,而且被隐藏的控件不再占用显示时占用的位置,而“visibility”隐藏的控件仅仅是将控件设置成不可见了,控件仍然占俱原来的位置。

function displayHideUI()

{

var ui =document.getElementById("bbs")

ui.style.display="none"

}

function displayShowUI()

{

var ui =document.getElementById("bbs")

ui.style.display=""//display为空的话会好使,为block会使后边的空间换行

}

function visibilityHideUI()

{

var ui =document.getElementById("bbs")

ui.style.visibility="hidden"

}

function visibilityShowUI()

{

var ui =document.getElementById("bbs")

ui.style.visibility="visible"

}

</script>

none 此元素不会被显示。

block 此元素将显示为块级元素,此元素前后会带有换行符。

inline 默认。此元素会被显示为内联元素,元素前后没有换行符。

inline-block 行内块元素。(CSS2.1新增的值)

list-item 此元素会作为列表显示。

run-in 此元素会根据上下文作为块级元素或内联元素显示。

compact CSS 中有值compact,不过由于缺乏广泛支持,已经从CSS2.1 中删除。

marker CSS 中有值marker,不过由于缺乏广泛支持,已经从CSS2.1 中删除。

table 此元素会作为块级表格来显示(类似<table>),表格前后带有换行符。

inline-table 此元素会作为内联表格来显示(类似<table>),表格前后没有换行符。

table-row-group 此元素会作为一个或多个行的分组来显示(类似<tbody>)。

table-header-group 此元素会作为一个或多个行的分组来显示(类似<thead>)。

table-footer-group 此元素会作为一个或多个行的分组来显示(类似<tfoot>)。

table-row 此元素会作为一个表格行显示(类似<tr>)。

table-column-group 此元素会作为一个或多个列的分组来显示(类似<colgroup>)。

table-column 此元素会作为一个单元格列显示(类似<col>)

table-cell 此元素会作为一个表格单元格显示(类似<td>和<th>)

table-caption 此元素会作为一个表格标题显示(类似<caption>)

inherit 规定应该从父元素继承display属性的值。

两种方法如下:

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