前端：JS/28/CSS DOM动态样式（style对象，style 对象属性与CSS属性的转换），Event DOM，事件对象简介（DOM和IE中的Event对象），实例：点出满天小星星

本文链接：https://blog.youkuaiyun.com/Java_53/article/details/106117028

本文深入探讨CSSDOM中如何使用JS操作样式属性，包括行内样式和类样式的修改，以及style对象的属性与CSS属性的转换规则。同时，详细讲解EventDOM中的事件句柄属性、事件类型和事件对象，通过实例演示如何利用事件对象实现网页互动，如创建满天小星星效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

CSS DOM动态样式

使用JS操作CSS中的各个属性；
JS只能操作或修改行内样式，如：imgObjstyle.border = “1px solid red”;
对于类样式，通过className 来赋值，如：imgObjclassName =“imgClass”;

style 对象

每个HTML标记，都有一个style属性；但这个style属性又是一个style对象；是CSS行内样式；
这个style对象的属性与CSS中的属性一一对应，完全相同；
例：imgObj.style.border =“1px solid red”;

style 对象属性与CSS属性的转换

1，如果是一个单词，style对象，与CSS属性一样；
2，如果是多个单词，第1个单词全小写，后面每个单词首字母大写，并去掉中划线；
例：divObj.style.backgroundColor=“red”;
divObj.style.backoundImage=“url(images/td.jpg)”;

Event DOM :事件DOM

1，事件简介

2，常用事件

3，事件句柄属性

HTML标记，都有自己相应的事件属性；
每个HTML标记，都对应一个元素对象，元素对象也具有相应的事件属性；
但是，元素对象的事件应该全都小写；
事件属性后面调用的一般是JS函数，通过函数来完成相应的功能；

Event 对象简介

当事件发生时，向要调用的函数，传递一个event参数，这个event参数是一个事件对象；即事件一发生便产生了event对象参数；且默认存在于第一个参数；该event对象中记录了当前事件发生时的环境信息，如：单击时的坐标，事件类型等；
注意：这个event对象是“短暂存在的”，新的事件发生，新的event对象产生，原来的event对象就消失了；

DOM中的Event对象

1，DOM中引入Event对象（DOM浏览器就是浏览器）
（1），通过HTML标记的事件属性来传递event对象；
在DOM中，event对象是作为事件调用函数时的参数，传递给函数的；
该event参数，是系统固定写法，全小写，不能加引号，它就是event对象参数，event参数包含此事件发生时所有的环境信息；

(2),使用元素对象的事件属性来传递event对象

DOM 中Event对象的属性

type :当前的事件类型；
pageX 和 pageY :距离网页左边和顶部的距离；
clientX 和 clientY :距离窗口左边和顶部的距离；
screenX 和 screenY :距离屏幕左边和顶部的距离；

IE中的Event对象

在IE中window对象下存在一个event属性从而代替了事件的event对象参数；

IE中Event对象属性

实例：点出满天小星星

<!DOCTYPE html>
<html lang="en" οnclick="init(event)">
<!-- 点击网页时触发init(event)函数 -->

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JS事件实例_点出满天小星星</title>
    <script type="text/javascript">
        function init(e) {
            document.body.bgColor = "#000";//网页背景为黑色
            var img = document.createElement("img");//生成星星图片对象
            document.body.appendChild(img);//把img对象追加到body上
            img.setAttribute("src", "images/th11.jpg");//img添加属性
            var width = getRandom(1, img.width);//图片随机大小
            img.setAttribute("width", width + "px");//图片随机大小
            var x = e.clientX - width / 2; var y = e.clientY - width / 2;//获取点击的位置距窗口的X，Y坐标
            img.setAttribute("style", "position:absolute;left:" + x + "px;top:" + y + "px;");//设置img的定位
        }
        function getRandom(min, max) {
            var random = Math.random() * (max - min) + min;
            random = Math.floor(random);
            return random;
        }
    </script>
</head>

<body>

</body>

</html>