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>

显示效果如下：

@沉木

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

用CSS添加鼠标样式-箭头、小手、十字 CSS实现虚线之dotted边框-点虚线、dashed边框-破折号虚线
用CSS添加鼠标样式-箭头.小手.十字- & CSS实现虚线之dotted边框-点虚线.dashed边框-破折号虚线 //小手样式 cursor:pointer; cursor其他取值 aut ...
【读书笔记】【WebKit技术内幕（二）】Chromium Webkit资源加载与网络栈、DOM树、HTML解释器、影子DOM、CSS解释器和样式布局、网页层次与渲染、绘图上下文、
文章目录前言 Something great 第4章资源加载和网络栈 Webkit 资源加载 Chromium多进程资源加载 Chromium 网络栈第5章 HTML解释器和DOM模型 DOM模 ...
前端笔记（3）css，选择器，文字文本属性，外观属性
CSS样式表(1) (1)css概念引入css的三种方法行内式(内联样式) 内部样式表(内嵌样式表) 外部样式表(外链式) (2)css选择器 css基础选择器标签选择器类选择器 id选择器 ...
CSS叠层样式表（一）
CSS叠层样式表(一) 如何使用css 选择器如何使用css 如何在HTML页面中添加CSS: 使用style属性:在元素中直接指定CSS样式,可以使用style属性来定义,称为内联样式. < ...
前端700行代码项目练习--小米官网（仅html、css实现）
目录一.效果展示二.准备工具 1.css重置样式 2.awesome图标字体 3.各图片 4.title网站图标三.代码一.效果展示二.准备工具 1.css重置样式请自行查找,CSDN上一 ...
前端js经典面试题目
/*** 用js实现一个类P 包含成员变量a,成员变量b成员函数sum sum输出a与b的和,a,b默认值都为0.实现一个类M,M继承自P,在P的基础上增加成员变量c成员变量函数sum变成a,b,c的 ...
js遍历追加html子样式,前端基本功：JS（十一）动画封装(CSS样式获取、JSON遍历)...
动画原理动画基本原理.gif 人走路的时候, 步长动画的基本原理 : 让盒子的 offsetLeft + 步长盒子原来的位置 0 + 10 盒子现在的offsetLeft 10 动画基本原理的 ...
前端(js/css/html)那些小的知识点，持续更新......
前端(js/css/html)那些小的知识点,持续更新...... 1.行内元素与块级元素有哪些及区别? 块级元素和行内元素的区别是,块级元素会占一行显示,而行内元素可以在一行并排显示.通过样式控制, ...
web前端-JS（DOM、BOM）
web前端-JS(DOM.BOM) 1. DOM- 操作元素 1.1 获取元素 1.2 事件基础 1.3 操作元素 1.3.1 改变元素的内容 1.3.2 常见元素的属性操作 1.3.3 表单元素的属 ...

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