初探JavaScript一

最新推荐文章于 2024-09-02 17:30:38 发布

可芭乐

最新推荐文章于 2024-09-02 17:30:38 发布

阅读量359

点赞数 1

分类专栏： JavaScript基础文章标签： javascript

本文链接：https://blog.csdn.net/a839371666/article/details/54317861

版权

JavaScript基础专栏收录该内容

37 篇文章 0 订阅

订阅专栏

鼠标、函数、隐藏显示、换肤、提示框

鼠标操作
onmouseover鼠标移入显示
onmouseout鼠标移出显示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
<style type="text/css">
    #div1 {
        width: 200px;
        height: 100px;
        background: #ccc;
        border: 1px solid #999;
        display: none;
    }
</style>
</head>
<body>
    <input type="checkbox" onmouseover="div1.style.display = 'block'" onmouseout="div1.style.display = 'none'" />
    <div id="div1">
        为了你的信息安全……
    </div>
</body>
</html>

当鼠标移到checkbox上时，会出现“为了你的信息安全……”的字样，移出时，div隐藏
函数
为方便编写JavaScript语句，可以选择使用函数
var用于定义

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
<style type="text/css">
    #div1 {
        width: 100px;
        height: 100px;
        background: red;
    }
</style>
<script type="text/javascript">
    function toGreen(){
        var odiv = document.getElementById('div1');

        odiv.style.width = '200px';
        odiv.style.height = '200px';
        odiv.style.background = 'green';
    }
    function toRed(){
        var odiv = document.getElementById('div1');

        odiv.style.width = '100px';
        odiv.style.height = '100px';
        odiv.style.background = 'red';
    }
</script>
</head>
<body>
    <div id="div1" onmouseover="toGreen()" onmouseout="toRed()"></div>
</body>
</html>

当鼠标移入时样式会发生变化
当鼠标移出时恢复原状
隐藏显示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
<style type="text/css">
    #div1 {
        width: 100px;
        height: 200px;
        background: #ccc;
        display: none;
    }
</style>
<script type="text/javascript">
    function showHide(){
        var oDiv = document.getElementById('div1');

        if (oDiv.style.display == 'block') {
            oDiv.style.display = 'none';
        }else {
            oDiv.style.display = 'block';
        }
    }
</script>
</head>
<body>
    <input type="button" value="显示隐藏" onclick="showHide()" />
    <div id="div1"></div>
</body>
</html>

当点击按钮时会显示被隐藏的内容，再次点击时隐藏
换肤

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
<link id="l1" rel="stylesheet" type="text/css" href="01.css">
<script type="text/javascript">
    function skin1(){
        var oL = document.getElementById('l1');
        oL.href = '01.css';
    }
    function skin2(){
        var oL = document.getElementById('l1');
        oL.href = '02.css';
    }
</script>
</head>
<body>
    <input type="button" value="皮肤1" onclick="skin1()" />
    <input type="button" value="皮肤2" onclick="skin2()" />
</body>
</html>

事先准备两个及以上的css，利用js实现换肤功能
提示框

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
<script type="text/javascript">
    function setText(){
        var oTxt = document.getElementById('txt1');

        oTxt.value = 'asdfghjk';
        oTxt.title = 'asdfghjk';//提示
    }
</script>
</head>
<body>
    <input id="txt1" type="text" />
    <input type="button" value="改文字" onclick="setText()" />
</body>
</html>

可芭乐

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
初探JavaScript一

鼠标、函数、隐藏显示、换肤、提示框鼠标操作 onmouseover鼠标移入显示 onmouseout鼠标移出显示<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title><style type="text/css"> #div1 { widt
复制链接

扫一扫

专栏目录