初识JS

从今天开始恶补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 >，会在地址栏后面加个#。

html中怎么写，JS 中怎么改

猜你喜欢