DOM（更改样式_事件）

2024-04-27 15:08:25

字体：大中小

来源：转载

供稿：网友

更改样式

对象.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事件

上一篇：tips使用

下一篇：关于CSS的垂直居中