DOM-操作元素

1、改变元素内容

1.1 element.innerText

 下面是直接显示在页面 不用按钮事件

 

1.2 element.innerHTML

 

2、常用元素属性操作

<body>
    <button id="sdz">史迪仔</button>
    <button id="nz">哪吒</button>
    <img src="../webApp/img/1.jpg" title="史迪仔">

    <script>
        //1.获取元素
        var sdz = document.getElementById('sdz');
        var nz = document.getElementById('nz');
        var img = document.querySelector('img');

        //2.注册时间 处理程序
        nz.onclick = function () {
            img.src = '../webApp/img/1564616990277.jpg';
            img.title = '哪吒';
        }
        sdz.onclick = function () {
            img.src = '../webApp/img/1.jpg';
            img.title = '史迪仔';
        }

    </script>
</body>

3、表单元素的属性操作

 

 

 

4、样式属性操作

 element.style:

 

获得焦点onfocus  失去焦点onblur

element.className:

在style标签先写一个class类

 

 点击文本后 想要变得东西较多 就将文本的类名改为上述准备好的类

 

 点击后 上述图案变成下面图案

 

 

 如果原先的和新增的想要同时保留 就在中间加空格

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值