js元素获取与操作

最新推荐文章于 2024-06-28 16:40:55 发布

scralet-moon

最新推荐文章于 2024-06-28 16:40:55 发布

阅读量415

点赞数

分类专栏： HTML 文章标签： HTML

本文链接：https://blog.csdn.net/weixin_43682329/article/details/84671301

版权

HTML 专栏收录该内容

31 篇文章 0 订阅

订阅专栏

可以使用内置对象document上的getElementById方法来获取页面上设置了id属性的元素，获取到的是一个html对象，然后将它赋值给一个变量，比如： ```javascript

``` **第二种方法：将javascript语句放到window.onload触发的函数里面,获取元素的语句会在页面加载完后才执行，就不会出错了。** ```javascript

....

这是一个div元素

###样式操作
>标签对象.style.css属性名="值" //改变标签对象的样式。

>示例：id.style.color="red";

>注意：属性名相当于变量名,所以css属性名中含有双拼词的(font-size)的减号要去掉，将后面的首字母大写。fontSize

###文本操作
>标签对象.innerHTML="内容"；//在标签对象内放置指定内容

###表单中值的操作
>标签对象.value； //获取标签对象的value值

>标签对象.value=”值“；//设置标签对象的value值



例子：
```html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>获取元素对象</title>
    <style>
        div{
            width:200px;
            height:200px;
            background:red;
        }
    </style>
</head>
<body>
    <script>
        // window 页面当中最大的对象
        //         onload 事件   加载完毕之后
        window.onload=function(){
            // 1.获取元素对象 document.getElementById()
            var oDiv=document.getElementById('item1');
            console.log(oDiv);
            // console.log(window);
        }
    </script>

    <div id="item1" style="width:500px">123</div>
    <script>
        // window 页面当中最大的对象
        //         onload 事件   加载完毕之后
        //window.onload=function(){
            // 1.获取元素对象 document.getElementById()
            //var oDiv=document.getElementById('item1');
            //console.log(oDiv);
            // console.log(window);
        //}

        //====================操作元素样式=============================
        var oDiv=document.getElementById('item1');
        // 同过元素对象的style属性来控制元素样式
        // 如果css 属性是双拼词 把中间的-去掉 将第二个单词的首字母大写
        // oDiv.style.width='500px';
        // oDiv.style.height='500px';
        // oDiv.style.backgroundColor='green';

        // ====================获取元素的样式的值==================================
        // 注意这种方式只能获取元素的行间(内联)样式
        var W=oDiv.style.width;
        console.log(W);

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>文本操作</title>
    <style>
        #item1{
            width:200px;
            height:200px;
            background:green;
        }
    </style>
</head>
<body>
    <div id="item1">123</div>
    <script>
        // 1.获取元素对象
        var T=document.getElementById('item1');
        // 文本操作 innerHTML
        //         注意会覆盖原有的内容
        //         会解析标签
        // T.innerHTML='<h2>这是js插进来的内容</h2>';
        // 获取元素里面的文本内容
        // console.log(T.innerHTML);

        // ================innerText================
        // 注意innerText 不解析标签
        T.innerText='<h2>这也是js添加的内容</h2>';
        console.log(T.innerText);
    </script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单值的操作</title>
</head>
<body>
    <span id="tit"></span> <br>
    请输入密码:<input type="text" name="pwd" id="p1"> <br>
    请确认密码:<input type="password" name="pwd1" id="p2"> <br>
    <button onclick=demo()>验证</button>
    <script>
        // 1.获取元素对象
        var    P1=document.getElementById('p1');
        var P2=document.getElementById('p2');
        var TT=document.getElementById('tit');

        // 当点击验证按钮触发的函数
        function demo(){
            // 验证 事件是否绑定成功
            // console.log('111');

            // 获取第一和第二次输入的值
            var V1=P1.value;
            var V2=P2.value;

            // 判断两次输入的值是否相同 如果相同给出绿色提示 如果不相同给出红警告
            if(V1==V2){
                TT.innerHTML='恭喜输入成功';
                TT.style.color='green';
            }else{
                TT.innerHTML='请重新输入';
                TT.style.color='red';
            }
        }
        // 通过value设置 表单的值
        // P1.value='123456';

        // 获取变单里的值
        // var V=P1.value;
        // console.log(V);
    </script>
</body>
</html>

scralet-moon

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js元素获取与操作

可以使用内置对象document上的getElementById方法来获取页面上设置了id属性的元素，获取到的是一个html对象，然后将它赋值给一个变量，比如： ```javascript``` **第二种方法：将javascript语句放到window.onload触发的函数里面,获取元素的语句会在页面加载完后才执行，就不会出错了。** ```javascript.... 这是一...
复制链接

扫一扫

专栏目录