（七）文档对象模型（DOM）（下）

最新推荐文章于 2022-06-23 22:07:23 发布

edazh

最新推荐文章于 2022-06-23 22:07:23 发布

阅读量205

点赞数 1

分类专栏： JavaScript学习笔记文章标签： dom javascrip

本文链接：https://blog.csdn.net/qq1239277179/article/details/51764857

版权

JavaScript学习笔记专栏收录该内容

7 篇文章 0 订阅

订阅专栏

1.读写数据
setAttribute()添加属性，getAttribute()获取属性，removeAttribute()删除属性。
2.显示和隐藏
修改DOM Element的style属性的 visibility属性会使元素变得不可见，但仍旧占据应有的位置，而display属性不仅将元素不可见，而且不再占位置。

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
        <title>显示和隐藏</title>
        <script type="text/JavaScript">
            function hideByVisibility(){
                line2.style.visibility='hidden';
                //visibility属性会使属性依旧占据页面上原有的位置
            }
            function hideByDisplay(){
                line2.style.display='none';
                //display属性会让元素在页面上看起来消失
            }
        </script>
    </head>
    <body>
        <div id="line1">line-1</div>
        <div id="line2">line-2</div>
        <div id="line3">line-3</div>
        <button onclick="hideByVisibility()">hide line-2 by visibility</button>
        <button onclick="hideByDisplay()"> hide line-2 by dispaly</button>
    </body>
</html>

3.改变颜色和大小
style的color属性改变文字颜色；backgroundColor：背景颜色；width和height控制元素大小。

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
        <title>改变颜色和大小</title>

    </head>
    <body>
        <div id="text">
        EDAZH-edazh
        </div>
        <script type="text/JavaScript">
            function fun(){
                text.style.fontSize=16+Math.floor(Math.random()*88)+'px';
                //改变字体大小
                text.style.lineHeight=1.2;//行高取文字高度的1.2倍

                //生成3个随机数来代表R,G,B三原色
                var c1=Math.floor(Math.random()*256);
                var c2=Math.floor(Math.random()*256);
                var c3=Math.floor(Math.random()*256);

                text.style.color='rgb('+c1+','+c2+','+c3+')';
                //随机改变文字的颜色
                var timer=setTimeout(fun,1000);//1秒钟刷新一次
            }
            fun();
        </script>
    </body>
</html>

4.改变位置
style的top和left属性决定了DOM元素左上角的坐标，利用程序改变他们的值可以实现元素移动的效果。

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
        <title>改变位置</title>
    </head>
    <body>
        <span id="round" style="position:absolute;left:100px;top:100px">
        edazh
        </span>
        <script type="text/JavaScript">
            //r存放圆的半径，单位为像素点
            var r=100;
            //ins表示圆的弧度
            var ins=1;

            //Circle()用来绘制圆的轨迹
            function Circle(){
                //用参数方程描述圆的轨迹
                x=r*Math.cos(ins)+100;
                y=r*Math.sin(ins)+100;

                //每次调用弧度增加0.02
                ins+=0.02;
                //用style.left和style.top属性控制元素的位置
                round.style.left=x+'px';
                round.style.top=y+'px';
            }
            //用计时器让圆的位置沿着圆周1毫秒变化一次,看起来像在转圈
            setInterval(Circle,1);
        </script>
    </body>
</html>

5.编辑控制
style的readOnly和disabled属性控制他们的编辑模式

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
        <title>编辑控制</title>
    </head>
    <body>
        <form>
            姓名：<input name="name" /><br/>
            密码：<input name="password" type="password"/><br/><br/>
            <input type="submit"/> &nbsp; <input type="reset"/><br/>
            <button onclick="readOnly(); return false;">只读</button>
            <button onclick="disable(); return false;">禁用</button>
            <button onclick="enable(); return false;">允许编辑</button>
            </form>
        <script type="text/JavaScript">
            function readOnly(){
                document.forms[0].name.readOnly=true;
                document.forms[0].password.readOnly=true;
            }
            function disable(){
                document.forms[0].name.disabled=true;
                document.forms[0].password.disabled=true;
            }
            function enable(){
                //启用将所有表单的readonly属性和disabled置为false
                document.forms[0].name.readOnly=false;
                document.forms[0].password.readOnly=false;
                document.forms[0].name.disabled=false;
                document.forms[0].password.disabled=false;
            }
        </script>
    </body>
</html>

6.改变样式
改变style的className属性可以方便的改变DOM元素的css类型。

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
        <title>改变样式</title>
        <style type="text/css">
            .out{display:none;}
            .over{
                list-style:none;
                position:absolute;
                left:10px;
                top:33px;
                border-bottom:3px #036 solid;
                display:block;
            }
        </style>
        <script type="text/JavaScript">

        </script>
    </head>
    <body>
        <ul class="navul">
            <li onmouseover="id1.className='over'" onmouseout="id1.className='out'">
            公司产品
            </li>
            <ul id="id1" class="out">
                <li><a href="#">办公设备</a></li>
                <li><a href="#">会议设备</a></li>
                <li><a href="#">文艺设备</a></li>
                <li><a href="#">门禁考勤</a></li>
                <li><a href="#">集团电话</a></li>
                <li><a href="#">办公设备</a></li>
                <li><a href="#">消耗用品</a></li>
            </ul>
        </ul>
    </body>
</html>

edazh

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
（七）文档对象模型（DOM）（下）

1.读写数据 setAttribute()添加属性，getAttribute()获取属性，removeAttribute()删除属性。 2.显示和隐藏修改DOM Element的style属性的 visibility属性会使元素变得不可见，但仍旧占据应有的位置，而display属性不仅将元素不可见，而且不再占位置。<!DOCTYPE html><html> <head>
复制链接

扫一扫