JavaScript案例学习1

最新推荐文章于 2022-12-04 00:31:30 发布

canglingyue

最新推荐文章于 2022-12-04 00:31:30 发布

阅读量385

点赞数

分类专栏： js+jq 文章标签： javascript

本文链接：https://blog.csdn.net/canglingyue/article/details/51701814

版权

js+jq 专栏收录该内容

69 篇文章 0 订阅

订阅专栏

原文链接：http://baiyuming.top/2016/06/07/JavaScript%E5%AD%A6%E4%B9%A01/

JavaScript 案例1

鼠标方上显示提示信息，鼠标移开提示信息消失

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>初探JavaScript</title>
    <style>
        #div1{
            background: red;
            width: 200px;
            height: 20px;
            display: none;
        }
    </style>
</head>
<body>
<input type="checkbox" onmouseover="document.getElementById('div1').style.display='block'"
    onmouseout="document.getElementById('div1').style.display='none'"
/>
<div id="div1">
    为了您的信息安全。。。。
</div>
</body>
</html>

其中：
1、js 主要是给网页添加交互
2、事件用户的操作
onclick 、 onmouseover 、 onmouseout
3、设置样式
οnmοuseοver=”document.getElementById(‘div1’).style.display=’block’”
4、getElementById 根据id 获取元素

JavaScript 案例2

鼠标放上div 变大，颜色改变

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>初探JavaScript</title>
    <style>
        #div1{
            background: red;
            width: 200px;
            height: 200px;
        }
    </style>
</head>
<body>
<div id="div1" onmouseover="toGreen()">

</div>
<script>
    function toGreen() {
        var oDiv = document.getElementById('div1');
        oDiv.style.width='300px';
        oDiv.style.height = '300px';
        oDiv.style.background = 'green';
    }

</script>
</body>
</html>

其中应用了函数的概念

JavaScript 案例3

点击按钮更换网页皮肤

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>初探JavaScript</title>
    <link id="link" rel="stylesheet" href="css1.css">
</head>
<body>
<input type="button" value="Skin1" onclick="changeSkin1()">
<input type="button" value="Skin2" onclick="changeSkin2()">
<script>
    function changeSkin1() {
        var oLink = document.getElementById('link');
        oLink.href = 'css1.css';
    }
    function changeSkin2() {
        var oLink = document.getElementById('link');
        oLink.href = 'css2.css';
    }
</script>
</body>
</html>

canglingyue

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
JavaScript案例学习1

原文链接：http://baiyuming.top/2016/06/07/JavaScript%E5%AD%A6%E4%B9%A01/JavaScript 案例1鼠标方上显示提示信息，鼠标移开提示信息消失<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>初探JavaScript</title>
复制链接

扫一扫