请关注“知了堂学习社区”，地址：http://www.zhiliaotang.com/portal.php

1.查找HTML元素
a.通过标签名

var x = document.getElementsByTagName("p");

b.通过类名

var x = document.getElementsByClassName("p");

c.通过id

var x = document.getElementById("intro");

如果找到该元素，则该方法将以对象（在x中）的 形式返回该元素；
如果未找到该元素，则x将包含null；

2.改变HTML内容
a.innerHTML
b.innerText，只改变文本内容

document.getElementById(id).innerHTML = 新的HTML
document.getElementById(id).innerText = 新的文档内容

3.改变HTML属性

document.getElementById(id).attribute = 新属性值

4.改变HTML样式

document.getElementById(id).style.property = 新样式

//加入class样式表
document.getElementById(id).className = "类名"

5.创建HTML元素节点
a.需要document.createElement（节点名称）
b.子父关系，node.appendChild（节点对象）
6.删除HTML元素节点

Eg:

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

    <style type="text/css">

        .content{
            width: 50px;
            height: 50px;
            border: 1px solid black;
            border-radius: 5px;
        }

    </style>

</head>
<body>

    <div>
        <div id="rig">
            <p>选择颜色</p>
            <p>
                <span style="background: red" id="c01">红色</span>
                <span style="background: yellow" id="c02">黄色</span>
                <span style="background: blue" id="c03">蓝色</span>
            </p>
            <p>选择宽度</p>
            <p>
                <span id="s01">100</span>
                <span id="s02">150</span>
                <span id="s03">200</span>
            </p>
            <p>选择高度</p>
            <p>
                <span id="h01">100</span>
                <span id="h02">150</span>
                <span id="h03">200</span>
            </p>
        </div>
    </div>
    <div class="content" id="content"></div>

    <script>

        window.onload = function(){

            var c01 = document.getElementById("c01");
            var c02 = document.getElementById("c02");
            var c03 = document.getElementById("c03");
            var s01 = document.getElementById("s01");
            var s02 = document.getElementById("s02");
            var s03 = document.getElementById("s03");
            var h01 = document.getElementById("h01");
            var h02 = document.getElementById("h02");
            var h03 = document.getElementById("h03");

            c01.onclick = function(){
                var content = document.getElementById("content");
                content.style.background = "red";
            }
            c02.onclick = function(){
                var content = document.getElementById("content");
                content.style.background = "yellow";
            }
            c03.onclick = function(){
                var content = document.getElementById("content");
                content.style.background = "blue";
            }
            s01.onclick = function(){
                var content = document.getElementById("content");
                content.style.width = 100 +"px";
            }
            s02.onclick = function(){
                var content = document.getElementById("content");
                content.style.width = 150 +"px";
            }
            s03.onclick = function(){
                var content = document.getElementById("content");
                content.style.width = 200 +"px";
            }
            h01.onclick = function(){
                var content = document.getElementById("content");
                content.style.height = 100 +"px";
            }
            h02.onclick = function(){
                var content = document.getElementById("content");
                content.style.height = 150 +"px";
            }
            h03.onclick = function(){
                var content = document.getElementById("content");
                content.style.height = 200 +"px";
            }
        }

    </script>

</body>
</html>
# javascript
Logo
AtomGit 开源协作平台测评赛

瓜分20万奖金 获得内推名额 丰厚实物奖励 易参与易上手

更多推荐

ADS1292R 使用 过程 心电图 高精度ADC模块

文章目录1 Fundamentals ofPrecision ADC Noise Analysis 精密模数转换器噪声分析基础1 Fundamentals ofPrecision ADC Noise Analysis 精密模数转换器噪声分析基础https://www.ti.com.cn/cn/lit/wp/slyy192/slyy192.pdf?ts=1600659610730&ref_u

avatar 开放原子开发者工作坊
cover

实现一个家庭安防与环境监测系统（一）

avatar 开放原子开发者工作坊

【cf】Codeforces Round #774 (Div. 2) 前4题

题目A. Square Counting 简单数学题目大意题解代码B. Quality vs Quantity 排序题目大意题解代码C. Factorials and Powers of Two 状态压缩dp+位运算题目大意题解代码D. Weight the Tree 树形dp+dfs题目大意题解代码E. Power Board 看起来像是数论？许多年没打cf了，偶尔打了一盘，恢复紫名了。A. S

avatar 开放原子开发者工作坊