从今天开始恶补js.
- js-鼠标弹出框
主要功能:
实现当鼠标移到一个控件上（多选框）时，显示提示内容，移出时显示的内容消失。
代码：
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>
<style>
#div1{
width:100px;
height:40px;
background:#CCC;
border:1px solid #999;
display:none
}
</style>
<body>
<input type="checkbox" onmousemove="div1.style.display='block'" onmouseout="div1.style.display='none'"/>
<div id="div1">
这是提示内容
</div>
</body>
</html>知识点：
border：为内容设置边框,分别为：宽度，样式，和颜色；
display：设置内容显示或隐藏（block & none）；
弊端：
1.以上代码存在浏览器不兼容问题主要是，没有正确的获取标签的值，直接通过标签的id修改标签的样式，将以下代码改为：
<input type="checkbox" onmousemove="div1.style.display='block'" onmouseout="div1.style.display='none'"/>
//改为正确获取元素的方式（通过Id获取元素）：
<input type="checkbox" onmousemove="document.getElementById('div1').style.display='block'" onmouseout="document.getElementById('div1').style.display='none'"/>2.通过该行为不仅能修改该内容的display属性，可以修改其任意属性，比如：width，height等，这是会出现在标签里面的这句话document.getElementById(‘div1’).style.属性=’属性值’反复出现，降低标签格式的可读性与美观程度。
这就引入了另一个概念：函数
修改后的代码:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>
<style>
#div1{
width:100px;
height:40px;
background:#CCC;
border:1px solid #999;
display:none
}
</style>
<script>
function setNone(){
//定义变量，就如果要修改的内容比较多，此方法更简洁
var div1=document.getElementById('div1')
div1.style.display='none'
}
function setBlock(){
document.getElementById('div1').style.display='block'
}
</script>
<body>
<input type="checkbox" onmousemove="setBlock()" onmouseout="setNone()"/>
<div id="div1">
这是提示内容
</div>
</body>
</html>
函数的声明和调用，调用可以不在标签里：
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<script>
function show() //定义
{
alert('abc');
}
show(); //调用
</script>
</head>
<body>
</body>
</html>- 实现换肤效果
通过html" title=JS>JS不仅可以更换各种标签的样式属性，还可以更换Link标签引入的css样式。
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link id="li" rel="stylesheet" type="text/css" href="css1.css" />
<title>无标题文档</title>
</head>
<script>
function setBlack(){
var li=document.getElementById('li')
li.href='css1.css'
}
function setRed(){
var li=document.getElementById('li')
li.href='css2.css'
}
</script>
<body>
<input type="button" value="黑皮肤" onclick="setBlack()"/>
<input type="button" value="红皮肤" onclick="setRed()"/>
<div id="div1">
这是提示内容
</div>
</body>
</html>- 菜单栏上导航的显示隐藏功能
此功能需要用到判断语句，如果菜单为显示状态，点击则会隐藏；如果隐藏，点击则会显示，代码如下：
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>
<style>
#div1{
width:100px;
height:200px;
background:#CCC;
display:none;
}
</style>
<script>
function setStutas(){
var li=document.getElementById('div1');
if(li.style.display=='none'){
li.style.display='block';}
else
{
li.style.display='none';}
}
</script>
<body>
<input type="button" value="显示&隐藏" onclick="setStutas()"/>
<div id="div1">
</div>
<div id="div1">
这是提示内容
</div>
</body>
</html>
html中怎么写js-中怎么改">html中怎么写，html" title=JS>JS 中怎么改
只有class选择器例外，若要修改标签的class选择器修饰的样式，在html" title=JS>JS里面使用： 标签.className=’ 新定义的class样式’；
- < a >链接里加html" title=JS>JS
代码：
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
</head>
<body>
<a href="javascript:alert('这是js');">链接</a>
</body>
</html>
一般在超链接没有任何链接对象时，用：< a href=”javascript:;”>链接< / a >这样点击该链接时，地址栏地址不变，如果用： < a href=”#”>链接< / a >，会在地址栏后面加个#。
