版权声明：本文为博主原创文章，转载请注明出处。 https://blog.csdn.net/twilight_karl/article/details/54893615
更改样式
对象.style.属性=”属性值”
<!DOCTYPE html>
<html>
<body>
<h1 id="id1">My Heading 1</h1>
<button type="button" onclick="s()">点击这里！</button>
<script>
function s(){
var color = document.getElementById('id1');
if(color.style.color=="red"){
color.style.color="blue";
}else{
color.style.color="red";
}
}
</script>
</body>
</html>
以上可以在每次点击按钮是改变文字颜色。
可以通过document.getElementById(‘p1’).style.visibility=’hidden’隐藏一个样式，visibility是css中的属性，
| 值 | 描述 |
|---|---|
| visible | 元素是可见的。默认值 |
| hidden | 元素是不可见的。 |
| collapse | 当在表格元素中使用时，此值可删除一行或一列，但是它不会影响表格的布局。被行或列占据的空间会留给其他内容使用。如果此值被用在其他的元素上，会呈现为 “hidden”。 |
| inherit | 规定应该从父元素继承 visibility 属性的值。 |
事件
onclick
当鼠标按下时触发的事件
onload 和 onunload
onload 和 onunload 事件会在用户进入或离开页面时被触发。
onload 事件可用于检测访问者的浏览器类型和浏览器版本，并基于这些信息来加载网页的正确版本。
onload 和 onunload 事件可用于处理 cookie。
onchange
改变文本内容时触发
<html>
<body>
改变输入框中的文字时，将所有字母改为大写
<input type="text" id="input">
<script>
var s = document.getElementById("input");
s.onchange=function(){onchanges()};
function onchanges(){
var s2 = s.value;
s.value = s2.toUpperCase()
}
</script>
</body>
</html>将输入的字母自动改为大写。其中可以用DOM给元素分配事件：
s.onchange=function(){onchanges()};
onmouseover 和 onmouseout
onmouseover 和 onmouseout 事件可用于在用户的鼠标移至 HTML 元素上方或移出元素时触发函数。
<html>
<body>
<div id="test" onmouseover="over();" onmouseout="out();" style="width:400;height:200;background-color:red; text-align:center;padding-top:100px;">
点击可更改文字
<div>
<script>
var s = document.getElementById("test");
function over(){
s.innerHTML="谢谢";
}
function out(){
s.innerHTML="点击可更改文字";
}
</script>
</body>
</html>以上代码可以在鼠标移入和移出时改变文本的内容
onmousedown、onmouseup 以及 onclick
onmousedown, onmouseup 以及 onclick 构成了鼠标点击事件的所有部分。首先当点击鼠标按钮时，会触发 onmousedown 事件，当释放鼠标按钮时，会触发 onmouseup 事件，最后，当完成鼠标点击时，会触发 onclick 事件。
将刚才的代码稍加改动：
<html>
<body>
<div id="test" onmousedown="down();" onmouseup="up();" style="width:400;height:200;background-color:red; text-align:center;padding-top:100px;">
点击可更改颜色
<div>
<script>
var s = document.getElementById("test");
function down(){
s.style.backgroundColor="#1ec5e5";
s.innerHTML = "请释放鼠标";
}
function up(){
s.style.backgroundColor="red";
s.innerHTML="请按下鼠标";
}
</script>
</body>
</html>以上只是事件中的一小部分，还有许多其他的事件以后再总结，DOM事件
