• JavaScript中的元素获取与操作


    js元素获取与操作

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

    <script type="text/javascript">
    
        var oDiv = document.getElementById('div1');
    
    </script>
    
    ....
    
    <div id="div1">这是一个div元素</div>
    

    上面的语句,如果把javascript写在元素的上面,就会出错,因为页面上从上往下加载执行的,javascript去页面上获取元素div1的时候,元素div1还没有加载,解决方法有两种:

    第一种方法:将javascript放到页面最下边

    ....
    
    
    <div id="div1">这是一个div元素</div>
    
    ....
    
    <script type="text/javascript">
    
        var oDiv = document.getElementById('div1');
    
    </script>
    </body>
    

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

    <script type="text/javascript">
    
        window.onload = function(){
            var oDiv = document.getElementById('div1');
        }
    
    </script>
    
    ....
    
    <div id="div1">这是一个div元素</div>
    

    样式操作

    标签对象.style.css属性名=“值” //改变标签对象的样式。

    示例:id.style.color=“red”;

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

    文本操作

    标签对象.innerHTML=“内容”;//在标签对象内放置指定内容

    表单中值的操作

    标签对象.value; //获取标签对象的value值

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

  • 相关阅读:
    WordPress插入图片无法居中的解决方法
    wordpress文章显示同一分类下的上一篇下一篇
    git4
    git3
    git2
    git1
    百度地图vue版本标记点拖拽事件传参问题
    postcss-plugin-px2rem的使用
    保留小数位toFixed()方法的怪异表现
    大公司是怎样开发和部署前端代码(转张云龙大神的回答)
  • 原文地址:https://www.cnblogs.com/victorfengming/p/11930984.html
Copyright © 2020-2023  润新知