Abstract: 初探CSS+JS

1. CSS

全程是Cascading Style Sheets

引入方式：

  • 行内样式

    1
    <p style="display:none">我是段落</p>

    优先级最高

  • 内嵌式

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    <head>
        <style type="text/css">
            body{
                background-color: red
            }
            p{
                margin-left: 20px
            }
    	</style>
    </head>

  • 外链式

    1
    <link rel="stylesheet" type="text/css" href="css/login.css">

    优先级：行内＞内嵌＞外链

    更多内容请访问w3cschool

2. JS

getElementById用法：

1
2
3
4
5
6
7
8
#“查找”id="demo"的HTML元素，并修改元素内容
document.getElementById('demo').innerHTML = "hello world";
#改变HTML元素的样式，是改变HTML属性的一种变种
document.getElementById("demo").style.fontSize="25px";
#通过改变display样式来隐藏HTML元素
document.getElementById("demo").style.display="none";
#通过改变display样式来显示隐藏HTML元素
document.getElementById("demo").style.display="block";

​ JS显示方案

​ 使用window.alert()写入警告框

​ 使用document.write()写入HTML输出

​ 使用innerHTML写入HTML元素

​ 使用console.log()写入浏览器控制台

JS HTML DOM文档

  • 查找HTML元素 
1
2
3
4
5
6
#通过元素id查找元素
document.getElementById(id)
#通过标签名来查找元素
document.getElementByTagName(name)
#通过类名来查找元素
document.getElementByClassName(name)
  • 改变HTML元素 
1
2
3
4
5
6
#改变元素的inner HTML
element.innerHTML= new html content
#改变HTML元素的属性值
element.attribute = new value
#改变HTML元素的样式
element.style.property = new style
  • 添加和删除元素 
1
2
3
4
5
6
7
8
9
10
#创建HTML元素
document.createElement(element)
#创建HTML元素
document.removeChild(element)
#添加HTML元素
document.appendChild(element)
#替换HTML元素
document.replaceChile(element)
#写入HTML输出流
document.write(text)
  • 添加事件处理程序 
1
2
#向onclick事件添加事件处理程序
document.getElementById(id).onclick = function(){code}

源码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<html>
    <title>JS</title>
    <body>
        <div id="div1">
            <p id="p1">这是一个段落。</p>
            <p id="p2">这是第二段落。</p>
        </div>
        <script>
            //新建<p></p>标签
        	var para = document.createElement("p");
            //新建文档
            var node = document.createTextNode("这是用js加的新段落。");
            //将node添加到para中 → <p>文档</p>
            para.appendChild(node);
            var element = document.getElementById("div1");
            //将p加入到div中
            element.appendChild(para);
        </script>
    </body>
</html>