<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
p{
color: black;
}
</style>
</head>
<body>
<div >
<p >我是一个段落</p>
</div>
<button >改颜色</button>
<button >隐藏、出现</button>
</body>
<script type="text/javascript">
//document.getElementById(id).style.property=new style 改css
var p1=document.getElementById("p1");
var p2=document.getElementById("p2");
p1.onclick=function(){
document.getElementById('p').style.color="red"; //语法：元素.style.样式名=样式值 读取和设置的都是内联样式优先级高，除了！important设置的
} //其中样式如带-，background-color要改成驼峰式backgroundColor
var count=1; //读取当前显示的样式 元素.currentStyle.元素名
p2.onclick=function(){
count++;
console.log(count);
if(count%2 == 0){
document.getElementById('p').style.visibility="hidden";
}else{
document.getElementById('p').style.visibility="visible";
}
}
//document.querySelector() 选择器元素查询
var qs=document.querySelector("#c p");//获取的是满足的第一个元素节点
var qsa=document.querySelectorAll("#c p");//获取的所有的元素节点，一个类数组，
//另外的一些查询
var all=document.all;//获取页面中所有的元素
console.log(all.length);
var html=document.documentElement;//html跟标签
var body=document.body;//body的引用
</script>
</html>