• 20150422 DOM操作


    DOM操作
    window
    history
    location
    document
    status
    每一个对象都有属性和方法
    一、Dom结构
    window对象
    alert(msg)
    confirm(msg) 返回bool型的值
    open(url,target,features) 打开新窗口,返回被打开的那个窗口对象。
    close()
    setInterval(code,delay);
    setTimeout(code,delay);
    history对象
    go(整数)
    location对象
    href属性:获得或指定一个url网址。
    document对象
    找到对象
    操作属性
    操作样式
    操作内容
    操作相关元素


    二、document对象
    (一)找到对象
    var a = document.getElementById("id"); 返回的是个对象
    var a = document.getElementsByName("name"); 返回的是个数组
    var a = document.getElementsByTagName("tagname"); 返回的是个数组
    (二)操作属性
    1.获取属性值
    var s = obj.getAttribute("属性名");
    2.设置或修改属性值
    obj.setAttribute("属性名","属性值");
    3.移除属性值
    obj.removeAttribute("属性名")

    (三)操作样式
    1.操作内联样式
    obj.style.backgroundColor=
    obj.style.xxxx

    2.操作样式表的class
    obj.className="class名"
    obj.setAttribute("class","class名")

    (四)操作内容
    1.表单元素。
    赋值:obj.value="";
    取值:var s = obj.value;

    2.非表单元素。
    赋值:obj.innerHTML = "";
    取值:var s = obj.innerHTML;

    (五)操作相关元素

     ..

     QQ页面设置

    <style type="text/css">
    #qqPane
    {
    250px;
    border:1px solid navy;
    }
    .divTitle
    {
    background-color:navy;
    color:white;
    text-align:center;
    font-weight:bold;
    padding-top:5px;
    padding-bottom:5px;
    margin-top:1px;
    }
    .divContent
    {
    height:300px;
    background-color:#FF9;
    display:none;
    }
    </style>
    <script language="javascript">
    function doShow(sid)
    {
    //找要显示的div
    var dd = document.getElementById(sid);
    //把所有divContent都给隐藏
    var divs = document.getElementsByTagName("div"); //获取所有的div
    for(var i=0;i<divs.length;i++)//遍历所有的div
    {
    if(divs[i].className=="divContent") //筛选出divContent
    {
    divs[i].style.display="none"; //把divContent统统隐藏
    }
    }
    //切换显示状态
    if(dd.style.display != "block")
    {
    dd.style.display="block";
    }
    else
    {
    dd.style.display = "none";
    }
    }

    </script>
    </head>

    <body>
    <div id="qqPane">
    <div class="divTitle" onclick="doShow('haoyou')">我的好友</div>
    <div id="haoyou" class="divContent"></div>
    <div class="divTitle" onclick="doShow('heimingdan')">黑名单</div>
    <div id="heimingdan" class="divContent"></div>
    <div class="divTitle" onclick="doShow('moshengren')">陌生人</div>
    <div id="moshengren" class="divContent"></div>
    </div>
    </body>
    </html>

     按钮几秒后能点击

    <body>
    <form id="form1" name="form1" method="post" action="">
    <p>asdfasdf</p>
    <p>asd</p>
    <p>f</p>
    <p>asdf</p>
    <p>asdgasdgasdg</p>
    <p>
    <input disabled="disabled" type="submit" name="btn" id="btn" value="同意(10)" />
    </p>
    </form>
    </body>
    </html>
    <script language="javascript">
    var num =10;
    function showNumber()
    {
    num--;
    var btn = document.getElementById("btn");                      
    btn.value = "同意("+num+")";

    if(num == 0)
    {
    btn.value="同意";
    btn.removeAttribute("disabled");
    }
    else
    {
    window.setTimeout("showNumber()",1000);
    }
    }
    showNumber();
    </script>

  • 相关阅读:
    Unity贴图压缩优化处理
    Unity游戏开发图片纹理压缩方案
    devexpress panelcontrol 里面控件自适应宽度
    devexpress winform spinedit 右边上下箭头去掉
    devexpress layoutcontrolitem 里面控件tabindex不起作用
    jar包生成本地maven ,以供pom引用
    C# 计算代码执行效率
    C# 使用队列
    C#遍历获取所有文件
    C#多线程等待所有子线程结束
  • 原文地址:https://www.cnblogs.com/m123/p/4449784.html
Copyright © 2020-2023  润新知