JS基础样式的 DOM 操作

一对元素的定位

在 js 中可以利用 id、class、name、标签名进行元素的定位，一般 id、class 用在客户端， name 用在服务端

1、用 id 定位

　　根据 id 最多只能找一个

var a = document.getElementById("id 名")    //将找到的变了放到变量 a 中

2、用 class 定位

　　根据classname找，找出来的是数组

var a = documen.getElementsByClassName("class 名")

3、用标记定位

　　根据标签名找，找出来的是数组

var a = document.getElementsByTagName ("标签名")

3、用 name 定位

　　根据 name 找，找出来的是数组

var a = document.getElementsByName( "name名" )

二对样式进行操作

1、利用定位找到元素存于变量中

var a = document.getElementById( " id " )

2、对该元素的样式进行操作

a.style.样式 = "值";

document.body.style.backgroundColor="red"   // 改变整个窗口的背景颜色

　　更改的样式作用在内联中，优先级最高，能够覆盖其他所有的样式。样式里带 “-” 要删掉，后面的第一个字母变为大写，放在等号右边是取值，可以看到元素内联样式的值

上代码示例

1、建一个长100x100的红色 div，鼠标移入变为200x200绿色，鼠标移出变为 100x100红色

//样式
.a {
　　100px;
　　height:100px;
　　background-color:red ;
}

 //布局
<body>
    <div class="a"></div>
</body>
 
//脚本
<script type="text/javascript">
    var v = document.getElementsByClassName('a')
    v[0].onmouseover = function () {
        v[0].style.width = "200px";
        v[0].style.height = "200px";
        v[0].style.backgroundColor = "blue";
    }
    v[0].onmouseout = function () {
        v[0].style.width = "100px";
        v[0].style.height = "100px";
        v[0].style.backgroundColor = "red";
    } 
</script>

3、index 与 this 的使用

index 对象的属性，可以记录一个int类型的值

　　当定位中获取的是一个数组时一般要用到 index 来记录数组中的索引，

　　用 this . index = i 将索引标记一下，当需要数组中的每个变量都需要执行一遍时（遍历），用数组[索引] 形式像下面的 v[i].onclick

this 代表对象

　　指在它上方与它最近的方法事件（function 函数所指向的操作）对象，可理解为这一次操作，

用在变量是一个数组，并且不确定索引的时候（即索引任意）。

上代码示例

例1、有5个导航菜单，颜色分别是红黄蓝绿紫，鼠标移入变为灰色，移除变为之前的颜色，点击变为黑色，同一时间只能有一个黑色

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title> 
    <style type="text/css">
        .div1 {
             100px;
            height: 50px;
            float: left;
            margin-left: 10px;
        }
    </style> 
</head>
<body> 
    <div class="div1" style="background-color: red"></div>
    <div class="div1" style="background-color: yellow"></div>
    <div class="div1" style="background-color: blue"></div>
    <div class="div1" style="background-color: green"></div>
    <div class="div1" style="background-color: Purple"></div>
</body>
</html>
<script type="text/javascript">
    //把颜色存在一个函数内
    function color(a) {
        var b;
        if (a == 0)
            b = backgroundColor = "red";
        else if (a == 1)
            b = backgroundColor = "yellow";
        else if (a == 2)
            b = backgroundColor = "blue";
        else if (a == 3)
            b = backgroundColor = "green";
        else if (a == 4)
            b = backgroundColor = "violet";
        return b;
    } 
    var v = document.getElementsByClassName("div1") 
    for (var i = 0; i < v.length; i++) {
        v[i].index = i;         //将索引标记一下 
        v[i].onmouseover = function () {  //移入事件
            this.style.backgroundColor = "gray";  // this 指这次操作的对象
        } 
        v[i].onmouseout = function () {  //移出事件
            if (this.style.backgroundColor == "black") {
                this.style.backgroundColor = "black";
            }
            if (this.style.backgroundColor == "gray") {
                this.style.backgroundColor = color(this.index);
            }
        } 
        v[i].onclick = function () {//点击事件 
            for (var j = 0; j < v.length; j++) {
                v[j].style.backgroundColor = color(j)
            }
            this.style.backgroundColor = "black";
        }
    }
</script>

例2、菜单、选项卡

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <style type=" text/css ">
        .div1
        {
             100px;
            height: 30px;
            background-color: red;
            float: left;
            margin-right: 10px;
        }

        .div1-div
        {
             100%;
            height: 400px;
            background-color: green;
            margin-top: 30px;
            display: none;
        }
    </style> 
</head>
<body>
    <div class="div1"></div>
    <div class="div1"></div>
    <div class="div1"></div>
    <div class="div1"></div>
    <div class="div1"></div>
    <div class="div1"></div>
    <div class="div2" style="z-index: 101;">111111</div>
    <div class="div2">222222</div>
    <div class="div2">333333</div>
    <div class="div2">444444</div>
    <div class="div2">555555</div>
    <div class="div2">666666</div>
</body>
</html>
<script type="text/javascript">
    var oDiv1s = document.getElementsByClassName('div1');
    var oDiv2s = document.getElementsByClassName('div2');
    var zind = 102; 
    for (var i = 0; i < oDiv1s.length; i++) { 
        oDiv1s[i].index = i;  //标记一下各选项卡的索引 
        //点击事件
        oDiv1s[i].onclick = function () { 
            for (var j = 0; j < oDiv1s.length; j++) {
                oDiv1s[j].style.backgroundColor = "green";  //点击时先全部变为绿色
            }
            this.style.backgroundColor = "red";  //点击变红色， 
            //选项卡切换代码
            oDiv2s[this.index].style.zIndex = zind;
            zind++; 
        } 
        //移入事件
        oDiv1s[i].onmouseover = function () {
            if (this.style.backgroundColor != "red") {
                this.style.backgroundColor = "blue";
            }
        } 
        //移出事件
        oDiv1s[i].onmouseout = function () {
            if (this.style.backgroundColor == 'blue') {
                this.style.backgroundColor = "green";
            }
        }
    }  
</script>

例3、将下拉菜单与选项卡放到一个页面上了

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title> 
    <style type ="text/css"> 
        .nav1 {
    position:relative;
    150px;
    height:50px;
    float:left;
    background-color:red;
    margin-right:10px;
} 
.nav2 {
    position:absolute;
    300px;
    height:300px;
    background-color:green;
    top:50px;
    display:none;
}  
    </style> 
</head>
<body>
    <div class="nav1">
        <div class="nav2"></div>
    </div> 
    <div class="nav1">
        <div class="nav2"></div>
    </div> 
    <div class="nav1">
        <div class="nav2"></div>
    </div> 
    <div class="nav1">
        <div class="nav2"></div>
    </div> 
</body>
</html>
<script type="text/javascript">
    var oNav1s = document.getElementsByClassName('nav1');
    var oNav2s = document.getElementsByClassName('nav2'); 
    for (var i = 0; i < oNav1s.length; i++) {
        oNav1s[i].index = i;
        oNav1s[i].onmouseover = function () {
            oNav2s[this.index].style.display = "block";
        }
        oNav1s[i].onmouseout = function () {
            oNav2s[this.index].style.display = "none";
        }
    } 
</script>

JS基础 样式的 DOM 操作

JS基础样式的 DOM 操作