DOM（更改样式_事件）

最新推荐文章于 2024-03-11 23:29:23 发布

twilight0402

最新推荐文章于 2024-03-11 23:29:23 发布

阅读量1k

点赞数

分类专栏： JavaScript 文章标签： color dom 对象

本文链接：https://blog.csdn.net/twilight_karl/article/details/54893615

版权

JavaScript 专栏收录该内容

20 篇文章 0 订阅

订阅专栏

更改样式

对象.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.οnchange=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>