Chapter 3. document对象

一、找到元素

document.getElementById("id"); 根据id找，最多找一个；

var a=document.getElementById("id"); 将找到的元素放在变量中；

document.getElementByName("name"); 根据name找，找出来的是数组；

document.getElementByTagName("name"); 根据标签名找，找出来的是数组；

document.getElementByClassName("name"); 根据classname找，找出来的是数组；

二、操作元素

1、获取内容

2、设置内容

<body>

<div id="me"><b>试试吧</b></div>
<input type="button" value="提交" onclick="tijiao()"/>

</body>
</html>

<script>

function tijiao()
{
    var get=document.getElementById("me");
    alert(get.innerHTML);
    alert(get.innerText);
    alert(get.outerHTML);
    get.innerHTML="<font color='red'>hello world</font>";
}

</script>

三、操作属性

首先利用元素的id找到该元素，存于一个变量中：var a = document.getElementById("id");

然后可以对该元素的属性进行操作：

a.setAttribute("属性名","属性值"); 设置一个属性，添加或更改都可以

a.getAttribute("属性名"); 获取属性的值

a.removeAttribute("属性名"); 移除一个属性

<body>

新中国成立于哪一年：
<input type="text" id="question"/>
<input type="button" value="提交" onclick="hanshu()"/>
<input type="hidden" value="1949" id="result" />

</body>
</html>

<script>

function hanshu()
{
    var a=document.getElementById("question");
    var a1=a.value;
    var b=document.getElementById("result");
    var b1=b.value;
    if(a1==b1)
    {
        alert("答对了");
    }
    else
    {
        alert("笨蛋");
    }
}

</script>

      

                                                                                        

四、操作样式

展示图片的自动和手动切换：

@charset "utf-8";
/* CSS Document */
*
{
    margin:0px auto;
    padding:0px;}
    
#tupian
{
    width:900px;
    height:600px;
    background-repeat:no-repeat;}
    
.pages
{
    top:200px;
    background-color:black;
    background-position:center;
    background-repeat:no-repeat;
    opacity:0.3;
    width:50px;
    height:80px;}
    
#p1
{
    background-image:url(%E6%9C%AA%E6%A0%87%E9%A2%98-1.png);
    float:left;
    margin:150px 0px 0px 10px;}
    
#p2
{
    background-image:url(%E6%9C%AA%E6%A0%87%E9%A2%98-2.png);
    float:right;
    margin:150px 10px 0px 0px;}
    
<body>
<div id="tupian" style="background-image:url(1089892.jpg);">
    <div class="pages" id="p1" onclick="dodo(-1)"></div>
    <div class="pages" id="p2" onclick="dodo(1)"></div>
</div>
</body>
</html>

<script>
var jpg=new Array();
jpg[0]="url(1089892.jpg)";
jpg[1]="url(1073305.jpg)";
jpg[2]="url(1089891.jpg)";
var tjimg=document.getElementById("tupian");
var xb=0;
var n=0;
function huan()
{
    xb++;
    if(xb==jpg.length)
    {
        xb=0;
    }
    tjimg.style.backgroundImage=jpg[xb];
    if(n==0)
    {
        var id=window.setTimeout("huan()",3000);
    }
}
function dodo(m)
{
    n=1;
    xb=xb+m;
    if(xb<0)
    {
        xb=jpg.length-1;
    }
    else if(xb>=jpg.length)
    {
        xb=0;
    }
    tjimg.style.backgroundImage=jpg[xb];
}
window.setTimeout("huan()",3000);

</script>

 

posted @ 2016-05-26 16:15  庚xiao午  阅读(162)  评论(0)  编辑  收藏  举报