如何使用js动态显示或隐藏DIV

JavaScript020

如何使用js动态显示或隐藏DIV,第1张

方法很多,最直观的就是用js控制div的display值,例如:

var div = document.getElementById('divID')

div.style.display = 'none'  // div隐藏

div.style.display = 'block'  // div显示

也可以写一段CSS,用CSS来控制div在视觉上隐藏,例如高度设为0、透明、溢出可视区等,还可以搭配CSS3的新属性来实现灵活多样的渐变动画效果,然后用JS来切换,例如:

.isHide {height:0 overflow:hidden opacity:0} div.classList.add('isHide')  // div隐藏

div.classList.remove('isHide')  // div显示

还可以利用jQuery的hide()、show()、fadeIn、fadeOut、toggle等方法来实现类似效果。

我们使用javascript实现js动态设置select中的某个值为选中值,操作如下:

使用javascript实现:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/htmlcharset=utf-8" />

<title>无标题文档</title>

</head>

<body>

<select name="jumpMenu" id="jumpMenu" onChange="jumpMenu('parent',this,0)">

<option id="1" value="跳转URL">111</option> //  111 是显示给用户的信息

<option id="2" value="跳转URL">222</option>

<option id="3" value="跳转URL">333</option>

<option id="4" value="跳转URL">444</option>

<option id="5" value="跳转URL">555</option>

</select>

<script type="text/javascript">

function display(optionID){

var all_options = document.getElementById("jumpMenu").options

for (i=0i<all_options.lengthi++){

if (all_options[i].id == optionID)  // 根据option标签的ID来进行判断  测试的代码这里是两个等号

{

all_options[i].selected = true

}

}

}

display("4")

</script>

</body>

</html>

扩展资料:

Js获得元素标签名称的方法:

1、$( this ).get(0).tagName

2、$( this )[0].tagName

3、$( this ).prop("tagName")

4、$( this ).prop("nodeName")

一、动态加载表格

1.首先在html中为表格的添加位置设置id

即是在html的body标签内部写一个div标签表明表格要添加到此div的内部。如下

<div id="tdl"><div>

2.在javascript中写添加表格的语句

若在当前html文件中,则写在<script>标签内部,如

复制代码 代码如下:

<script type="text/javascript" >

document.getElementById("tbl").innerHTML="<table><tr><td></td></tr></table>" //此处添加的表格可根据自己需要创建

</script>

若是通过引入js文件,则在js文件(假设是test.js)中直接写如下语句

复制代码 代码如下:

document.getElementById("tbl").innerHTML="<table><tr><td></td></tr></table>"

然后再引入自己的html文件

复制代码 代码如下:

<script type="text/javascript" src="test.js"></script>

二、 动态添加表格行

1.首先在html中为表格行的添加位置设置id,此位置必须是<tbody>内部(不是特别准确,但根据我的测试就得到此结论,有其他的方法请留言,谢谢),如下

复制代码 代码如下:

<table>

<thead></thead>

<tfoot><tfoot>//tfoot与thead是与tbody配套使用,但我在写的时候,没用也可以。

<tbody id="rows"></tbody>

</table>

[\s\S ]*\n

2.在javascript内容中,要先创建行和单元格,再在<.tbody>中添加行,如下

[code]

row=document.createElement("tr")//创建行

td1=document.createElement("tr")//创建单元格

td1.appendChild(document.createTextNode("content"))//为单元格添加内容

row.appendChild(td1)//将单元格添加到行内

document.getElementById("rows").append(row)//将行添加到<tbody>中