美文网首页
js的简单操作

js的简单操作

作者: 常伟波 | 来源:发表于2018-07-19 13:21 被阅读0次

    1. 用js操作属性

    用 document.getElementById(‘对应的id名称’); 这种方法获取 指定的ID 的标签,可以进行其他 操作,
    还有document.getElementByClassName(‘对应的class名称’); 通过类名来获取标签



    像这样的一些操作,都需要在页面加载完成之后去进行,所以就用到了
    这个页面加载完成之后,执行的一个匿名函数
    window.onload=function(){ document.getElementById(‘对应的id名称’); }



    可以对一些属性进行操作,如下如所示:
    图片.png

    js操作 类名getElementsByClassName

    图片.png
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>js的操作属性</title>
        <script type="text/javascript">
            window.onload=function(){
                var oDiv1=document.getElementById('div1');
                oDiv1.title='这是一个div';
                oDiv1.style.color='red';
                var oDiv2=document.getElementById('div2');
                oDiv2.style.background="gold";
                oDiv2.style.fontSize="30px";
                var oA=document.getElementById('link');
                oA.href="http://www.tencent.com";
                oA.title="跳转到腾讯";
                var Div3 = document.getElementsByClassName('div');
                Div3[0].style.background='cyan';
                Div3[1].style.background='red';
                var Div=document.getElementsByTagName('div');    // 通过 标签名 来查找
    
                var List=document.getElementById('ul2');        //指定 某个标签
                var listcon=List.getElementsByTagName('li');        //通过 上面指定的标签 ,去获取里面 li标签
    
                alert(listcon.length);        // 获取长度
            }
        </script>
    </head>
    <body>
        <div id="div1">这是div1</div>
        <div id="div2">这是div2</div>
        <a href="#" id="link">腾讯</a>
        <div class="div">这是div3</div>
        <div class="div">这是div4</div>
        <ul id="ul1">
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>3</li>
            <li>4</li>
        </ul>
        <ul id="ul2">
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
        </ul>
    </body>
    </html>
    

    2. js操作class

    图片.png

    3. js 用中括号操作属性

    4. js 函数

    5. js可控换肤

    图片.png

    6. js的匿名函数

    7. 函数的传参

    8. return关键字

    图片.png

    9.数组

    相关文章

      网友评论

          本文标题:js的简单操作

          本文链接:https://www.haomeiwen.com/subject/tuttmftx.html