Web前端——JavaScript练习

最新推荐文章于 2023-03-28 13:58:46 发布

VIP文章暮　色

最新推荐文章于 2023-03-28 13:58:46 发布

阅读量387

点赞数

分类专栏：前端 JavaScript css 文章标签： web前端 JavaScript

本文链接：https://blog.csdn.net/infotw/article/details/94166565

版权

显示和隐藏，改变display属性

关键代码：

e.style.display = "block";
e.style.display = "none";

源码：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>显示和隐藏</title>
        <script type="text/javascript">
            function showPicture(){
                //普通方式获得控件实例
                var e = document.getElementById("myimg");
                e.style.display = "block";
            }
            
            function hidePicture(){
                //querySelector是html5增加的
                //id前面得写#,class前面得写
                document.querySelector("#myimg").style.display = "none";
                //标签直接写即可,获取到第一个img标签
                //document.querySelector("img").style.display = "none";
            }
        </script>
    </head>
    <body>
        <a href="javascript:void(0);"onclick="showPicture()">查看图片</a>
        <a href="javascript:void(0);"onclick="hidePicture()">隐藏图片</a>
        <br />
        <img id="myimg" src="http://www.w3school.com.cn/i/eg_mouse.jpg" style="display: none;"  >
    </body>
</html>

鼠标滑动更改内容 onmouseover

关键：
onmouse事件

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <script type="text/javascript">
            function moveToBlue(){
                var e = document.querySelector("#btn_blue");
                var e2 = document.querySelector("#btn_green");
                var div = document.querySelector("#content");
                e.st

最低0.47元/天解锁文章

暮　色

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Web前端——JavaScript练习

显示和隐藏，改变display属性关键代码：e.style.display = "block";e.style.display = "none";源码：<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>显示和隐藏&lt...
复制链接

扫一扫