JS美化网页

document.getElementById

通过id获得html元素对象，参数是html文档中的id名字

<!DOCTYPE HTML>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>无标题文档</title>

    <script>

        window.onload = function (){

            var div = document.getElementById('div');
            var p = document.getElementById('p');
            var h1 = document.getElementById('h1');

            alert(div);
            alert(p);
            alert(h1);

        };
    </script>

</head>

<body>
<p id="p">hhhhhh</p>
<div id="div">zzzzzzzzzzz</div>
<h1 id="h1">vvvvvvvvvvv</h1>
</body>
</html>

HTML 的属性操作：读、写

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>

<script>
/*
    HTML 的属性操作：读、写
        属性名：
        属性值：

        读操作：获取、找到
        元素.属性名

        写操作：“添加”、替换、修改
        元素.属性名 = 新的值

*/
window.onload = function (){
    var oBtn = document.getElementById('btn1');
    var oText = document.getElementById('text1');
    var oSelect = document.getElementById('select1');

    oBtn.onclick = function (){
        // alert(oBtn.value);        // '按钮'
        // alert( oText.value );
        // alert( oSelect.value );

        // 字符串连接
        // oText.value    oSelect.value
        // '刘伟' +  '北京'     =>    '刘伟北京'
        // '刘伟' + '在' + '北京'     =>    '刘伟在北京'

        alert(oText.value + ' 在 ' + oSelect.value);

        //oBtn.value = 'button';
        //oText.value = 123;
        //oText.value = oSelect.value;
    };
};
</script>

</head>

<body>

<input id="text1" type="text" />
<select id="select1">
    <option value="北京">北京</option>
    <option value="上海">上海</option>
    <option value="杭州">杭州</option>
</select>
<input id="btn1" type="button" value="按钮" />

</body>
</html>

innerHTML

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>

<script>
/*
    HTML 的属性操作：读、写
        属性名：
        属性值：

        读操作：获取、找到
        元素.属性名

        写操作："添加？"、替换、修改
        元素.属性名 = 新的值

        oP.innerHTML                    => 读取p里面所有的html代码
        oP.innerHTML = 123;        => 替换p里面所有的html代码

*/
window.onload = function (){
    var oBtn = document.getElementById('btn1');
    var oText = document.getElementById('text1');
    var oP = document.getElementById('p1');

    oBtn.onclick = function (){
        // alert( oP.innerHTML );
        oP.innerHTML = oText.value;
    };
};
</script>

</head>

<body>

<input id="text1" type="text" />
<input id="btn1" type="button" value="按钮" />
<p id="p1">这是一些文字</p>

</body>
</html>

获取元素的第二种方法

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<script>
/*
        var oUl = document.getElementById('list');


 var aLi = oUl.getElementsByTagName('li');
                            // aLi => [ li, li, li ]     元素的集合
                            aLi.length                                3
                            aLi[0]

*/
window.onload = function (){
    //    var oUl = document.getElementById('list');
    var oUl = document.getElementsByTagName('ul')[0];
    var aLi = oUl.getElementsByTagName('li');

    // document.getElementsByTagName('li');

    // alert( aLi.length );
};
</script>
</head>

<body>

<ul id="list">
    <li></li>
    <li></li>
    <li></li>
</ul>

<ol>
    <li></li>
    <li></li>
</ol>

</body>
</html>

style属性

html文档中的每一个元素都是一个对象,文档的每个元素都有一个属性style。通过style属性可以设置元素的任意css样式

<!DOCTYPE HTML>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>无标题文档</title>

    <script>
    window.onload = function () {
        var button = document.getElementsByTagName('input');
        var content = document.getElementById('p1');
        var num = 12;
        button[0].onclick = function () {
            if (num >= 14){
                num -= 2;
            }
            content.style.fontSize = num + 'px';
        }
        button[1].onclick = function () {
            num += 2;
            content.style.fontSize = num + 'px';
        }
        button[2].onclick = function () {
            content.style.width = '500px';
            content.style.border = '3px solid black';
            content.style.backgroundColor = 'red';
            content.style.color = 'yellow';
            content.style.padding = '4px';
        }
        button[3].onclick = function () {
            content.style.width = '500px';
            content.style.border = '3px solid black';
            content.style.backgroundColor = 'yellow';
            content.style.color = 'red';
            content.style.padding = '4px';
        }
    }


    </script>

</head>

<body>
<input id="btn1" type="button" value="-" />
<input id="btn2" type="button" value="+" />
<input id="btn3" type="button" value="红" />
<input id="btn4" type="button" value="黄" />
<p id="p1" >
    html文档中的每一个元素都是一个对象,文档的每个元素都有一个属性style。通过style属性可以设置元素的任意css样式
</p>

</body>
</html>

<!DOCTYPE HTML>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>无标题文档</title>
    <style>
        .yellow{
            width :500px;
            border : 3px solid black;
            background-color : yellow;
            color : red;
            padding : 4px;
        }
        .red{
            width : 500px;
            border : 3px solid black;
            background-color : red;
            color : yellow;
            padding : 4px;
        }
    </style>
    <script>
    window.onload = function () {
        var button = document.getElementsByTagName('input');
        var content = document.getElementById('p1');
        var num = 12;
        button[0].onclick = function () {
            if (num >= 14){
                num -= 2;
            }
            content.style.fontSize = num + 'px';
        }
        button[1].onclick = function () {
            num += 2;
            content.style.fontSize = num + 'px';
        }
        button[2].onclick = function () {
            content.className = 'red';
        }
        button[3].onclick = function () {
            content.className = 'yellow';
        }
    }


    </script>

</head>

<body>
<input id="btn1" type="button" value="-" />
<input id="btn2" type="button" value="+" />
<input id="btn3" type="button" value="红" />
<input id="btn4" type="button" value="黄" />
<p id="p1" >
    html文档中的每一个元素都是一个对象,文档的每个元素都有一个属性style。通过style属性可以设置元素的任意css样式
</p>

</body>
</html>

切换图片(数组应用)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
   

    <script>
        window.onload = function () {
            var btn = document.getElementById('btn');
            var img = document.getElementById('pic');
            var arr = ['img/1.jpg','img/2.jpg','img/3.jpg','img/4.jpg'];
            var i = 1;
            btn.onclick = function () {
                btn.value = "第" + (i+1) + "张";
                btn.id = 'hello'
                img.src = arr[i];
//                img.width = 1000;
                i++;
                if(i == arr.length)
                {
                    i = 0;
                }
            }


        }
    </script>

</head>
<body>

    <input type="button" value="第1张" id = "btn">
    <img src = "img/1.jpg" id = "pic" width="500">

</body>
</html>

cssText

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>

<style>
div { width:100px; height:100px; border:1px solid #333; }
</style>

</head>

<body>

<div id="div1">123</div>

<input id="btn1" type="button" value="按钮" />

<script>
var oDiv = document.getElementById('div1');
var oBtn = document.getElementById('btn1');

oDiv.onclick = function (){
    // oDiv.style.width = '200px';
    oDiv.style.cssText = ' width:200px; height:200px; ';
};
oBtn.onclick = function (){
    // oDiv.style.width = '100px';
    oDiv.style.cssText = '';
};

</script>

</body>
</html>

this指针

this : 这个
this：指的是调用当前方法（函数）的那个对象

function fn1(){
    alert( this );                // window
}
// fn1();
// window.fn1();
</script>

</head>

<body>

<input id="btn1" type="button" value="按钮" />

<input id="btn2" type="button" onclick=" fn1(); " value="按钮2" />

<script>
var oBtn = document.getElementById('btn1');
// oBtn.onclick = fn1;
oBtn.onclick = function (){
    // this
    fn1();
};

<!DOCTYPE HTML>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>无标题文档</title>
    <script>
//        function test(obj) {
//            alert(obj);
//            alert(this);
//        }
////        test();//window
////        window.onload = function () {
////            var btn1 = document.getElementById('btn1');
////            btn1.onclick = test;
////        }
    </script>
    <style>
        li{
            border: 1px solid red;
        }
    </style>
</head>

<body>
<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
</ul>
<!--<input id="btn1" type="button" value="按钮" onclick="window.test(this);"/>-->
<!--<input id="btn2" type="button" value="按钮2" />-->
<!--<div id="div" onclick="fn1();">dddfdsfdsfdsf</div>-->
<script>
        var lis = document.getElementsByTagName('li');

        for(var i = 0; i < lis.length; i++)
        {
            lis[i].onclick = function () {

//                alert(i);
                alert(this.innerText);
//                alert(lis[i].innerText);
            }
        }
</script>
</body>
</html>

this应用

写一段js，给li里填上今天，明天，后天，点击某个li，弹出该li里面的文本

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style>
li { height:30px; border-bottom:1px solid #333; }
</style>
<script>
window.onload = function (){
    var oUl = document.getElementById('list');
    var aLi = oUl.getElementsByTagName('li');
    var arr = [ '今天', '明天', '后天' ];
    var len = arr.length;

    for( var i=0; i<len; i++ ){

        aLi[i].innerHTML = arr[i];

        aLi[i].onclick = function (){
             alert(this.innerHTML);
        };
    }
};
</script>
</head>

<body>

<ul id="list">
    <li></li>
    <li></li>
    <li></li>
</ul>

</body>
</html>

索引值

//我当前点击的按钮是这一组按钮中的第几个按钮

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<script>
window.onload = function (){
    var aBtn = document.getElementsByTagName('input');

    for( var i=0; i<aBtn.length; i++ ){

        aBtn[i].index = i;            // 自定义属性（索引值）

        aBtn[i].onclick = function (){


            alert( this.index );

        };
    }
};
</script>
</head>

<body>

<input type="button" value="btn1" />
<input type="button" value="btn2" />
<input type="button" value="btn3" />

</body>
</html>

索引值应用—选项卡

第一步：制作三个点击按钮：（其中一个按钮为选中状态）

　<button class="active">1</button>
<button>2</button>
<button>3</button>

第二步：为按钮加简单样式：

　　　　<style>
　　　　　　button {background: white ;}
　　　　　　.active{background: yellow;}
　　　　</style>

第三步：加事件，即点击之后按钮变为yellow；

　　　　<script type="text/javascript">
　　　　　　window.onload=function () {
　　　　　　　　var aBtn=document.getElementsByTagName("button");
　　　　　　　　var i=0;
　　　　　　　　for(i=0;i<aBtn.length;i++){
　　　　　　　　　　aBtn[i].onclick=function () {
　　　　　　　　　　　　for(i=0;i<aBtn.length;i++){
　　　　　　　　　　　　aBtn[i].className='';
　　　　　　　　　　　　}
　　　　　　　　　　　　this.className="active"
　　　　　　　　　　}
　　　　　　　　}
　　　　　　}
　　　　</script>

因此选项卡的头部就完成了，接下来做选项卡的下面部分；
　　第四步：在下面加内容，以及为其内容加样式，并设置第一部分内容显示，其他内容隐藏；

　　　　<div style="display:block">111</div>
　　　　<div>222</div>
　　　　<div>333</div>

第五步：同样的为内容加点击事件：

<script type="text/javascript">
　　　　　　window.onload=function () {
　　　　　　　　var aBtn=document.getElementsByTagName("button");
　　　　　　　　var aDiv=document.getElementsByTagName("div");
　　　　　　　　var i=0;
　　　　　　　　for(i=0;i<aBtn.length;i++){
　　　　　　　　　　aBtn[i].index=i;
　　　　　　　　　　aBtn[i].onclick=function () {
　　　　　　　　　　　　for(i=0;i<aBtn.length;i++){
　　　　　　　　　　　　aBtn[i].className='';
　　　　　　　　　　　　aDiv[i].style.display='none';
　　　　　　　　　　　　}
　　　　　　　　　　　　this.className="active";
　　　　　　　　　　　　aDiv[this.index].style.display="block";
　　　　　　　　　　}
　　　　　　　　}
　　　　　　}
　　　　</script>

效果原理为：
　　　　1、点击按钮时，改变class的style.display
　　　　2、选项卡的头部标签：
　　　　　　所有按钮的className都为空
　　　　　　让当前按钮的className为active
　　　　　　（注意this的使用）
　　　　3、选项卡内容
　　　　　　所有div的display都为none
　　　　　　让当前div的display为block
　　　　　　（注意当前编号的使用即aBtn[i].index=i;）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div {
            width: 200px;
            height: 200px;
            background: #ccc;
            border: 1px solid red;
            display: none;
        }

        button {
            background: white;
        }

        .active {
            background: yellow;
        }
    </style>
</head>
<body>
<button class="active">1</button>
<button>2</button>
<button>3</button>
<div style="display: block">111111111</div>
<div>222222222</div>
<div>333333333</div>
<script>
    //即点击之后按钮变为yellow
    window.onload = function () {
        var btns = document.getElementsByTagName('button');
        var divs = document.getElementsByTagName('div');
        for(var i = 0; i < btns.length; i++)
        {
            btns[i].index = i;
            btns[i].onclick = function () {
                //将所有按钮的背景色清空
                //隐藏所有的div
                for(var j = 0; j < btns.length; j++)
                {
                    btns[j].className = '';
                    divs[j].style.display = 'none';
                }
                //将当前按钮的背景色变黄
                this.className = 'active';
                //显示和当前按钮对应的div
                //当前被点击的按钮是这组里的第?个按钮，
                divs[this.index].style.display = 'block';
            }
        }
    }
</script>
</body>
</html>

最后编辑于：2018.06.28 08:52:13

人面猴
序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
沈念sama阅读 214,922评论 6赞 497
死咒
序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
沈念sama阅读 91,591评论 3赞 389
救了他两次的神仙让他今天三更去死
文/潘晓璐我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
开封第一讲书人阅读 160,546评论 0赞 350
道士缉凶录：失踪的卖姜人
文/不坏的土叔我叫张陵，是天一观的道长。经常有香客问我，道长，这世上最难降的妖魔是什么？我笑而不...
开封第一讲书人阅读 57,467评论 1赞 288
港岛之恋（遗憾婚礼）
正文为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
茶点故事阅读 66,553评论 6赞 386
恶毒庶女顶嫁案：这布局不是一般人想出来的
文/花漫我一把揭开白布。她就那样静静地躺着，像睡着了一般。火红的嫁衣衬着肌肤如雪。梳的纹丝不乱的头发上，一...
开封第一讲书人阅读 50,580评论 1赞 293
城市分裂传说
那天，我揣着相机与录音，去河边找鬼。笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。我是一名探鬼主播，决...
沈念sama阅读 39,588评论 3赞 414
双鸳鸯连环套：你想象不到人心有多黑
文/苍兰香墨我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
开封第一讲书人阅读 38,334评论 0赞 270
万荣杀人案实录
序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
沈念sama阅读 44,780评论 1赞 307
护林员之死
正文独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋以下内容为张勋视角年9月15日...
茶点故事阅读 37,092评论 2赞 330
白月光启示录
正文我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
茶点故事阅读 39,270评论 1赞 344
活死人
序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
沈念sama阅读 34,925评论 5赞 338
日本核电站爆炸内幕
正文年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
茶点故事阅读 40,573评论 3赞 322
男人毒药：我在死后第九天来索命
文/蒙蒙一、第九天我趴在偏房一处隐蔽的房顶上张望。院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
开封第一讲书人阅读 31,194评论 0赞 21
一桩弑父案，背后竟有这般阴谋
文/苍兰香墨我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。一阵脚步声响...
开封第一讲书人阅读 32,437评论 1赞 268
情欲美人皮
我被黑心中介骗来泰国打工，没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。一个月前我还...
沈念sama阅读 47,154评论 2赞 366
代替公主和亲
正文我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
茶点故事阅读 44,127评论 2赞 352