从今天开始恶补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>
- 实现换肤效果
通过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 中怎么改
只有class选择器例外,若要修改标签的class选择器修饰的样式,在JS里面使用: 标签.className=’ 新定义的class样式’;
- < a >链接里加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 >,会在地址栏后面加个#。