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>
显示效果如下: