javaScript之操作元素

最新推荐文章于 2022-11-09 20:02:25 发布

那也是我的网名.

最新推荐文章于 2022-11-09 20:02:25 发布

阅读量126

点赞数

文章标签： javascript

本文链接：https://blog.csdn.net/qq_45248120/article/details/105739096

版权

**innerText：**修改元素内容

<body>
    <div></div>
    <p>
        我是文字
        <span>123</span>
    </p>
    <script>
        // innerText 和 inner HTML 的区别
        // 1. inner Text 不识别html 标签 非标准  去除空格 和换行
        var div = document.querySelector("div")
        div.innerText = '今天是：2020';

**inner HTML：**修改元素内容


        // 2. inner HTML 识别 HTML 标签 W3C标准  保留空格和换行
        div.innerHTML = "<strong>今天是</strong>：2020";
        //  这俩个属性是可读写的 可以获取元素里面的内容
        var p = document.querySelector("p");
        console.log(p.innerHTML);

**修改的元素名字.属性： **修改元素属性``

    // 2.注册事件
    zxy.onclick = function(){
        img.src = "images/u=2637309453,136156531&fm=26&gp=0.jpg" // 修改元素属性
        img.title= "张学友"          // 修改元素属性
    }

修改元素的名字.style.需要修改的样式: 修改元素样式属性

        // 获取元素
        var div = document.querySelector("div");
        // 绑定事件 操作元素
        div.onclick = function(){
            // div.style.backgroundColor = "bule"  div.style 里面的属性 采取驼峰命名法
            this.style.backgroundColor = "purple" // 修改元素样式
            this.style.width = "250px";  // 修改元素样式
            // js 里面的样式采取驼峰命名法 比如 fontSize backgroundColor
            // js 修改 style 样式操作 产生的是行内样式 css权重比较高

        }

（特殊） 表单元素的属性操作

<body>
    <button>按钮</button>
    <input type="text" value="输入内容" >
    <script>
        // 1.获取元素
        var btn = document.querySelector("button");
        var input = document.querySelector("input");
        // 2.注册事件 处理程序
        btn.onclick = function(){
            // input.innerHTML = "点击了"  这个是普通盒子 比如 div 标签里面的内容
            // 表单里面的值 是通过 value 来修改的
            input.value = "被点击了"
            // 如果想要某个表单被禁用 不能再点击 disabled 我们想要这个按钮被禁用
            btn.disabled = "true" //禁用
            this.disabled - "true" // this是指向事件函数的调用者 btn
        }
    </script>
</body>

那也是我的网名.

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
javaScript之操作元素

**innerText：**修改元素内容<body> <div></div> <p> 我是文字 <span>123</span> </p> <script> // innerText 和 inner HTML 的区别 ...
复制链接

扫一扫