JavaScript初显轮廓

最新推荐文章于 2024-03-10 13:59:12 发布

杰希默克

最新推荐文章于 2024-03-10 13:59:12 发布

阅读量482

点赞数

分类专栏：前端文章标签： javascript css 对象

本文链接：https://blog.csdn.net/u013848401/article/details/52397327

版权

前端专栏收录该内容

31 篇文章 0 订阅

订阅专栏

CSS DOM动态样式与style对象

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

每个HTML标签都有一个style属性。但这个style属性又是一个style对象。
style对象的属性，与CSS中的属性一一对应。

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

1、如果是一个单词，style对象属性与CSS属性一样。
2、如果是多个单词，第1单词全小写，后边每个单词首字母大写，并去掉下划线。
i.divObj.style.backgroundColor = “red”;
ii.divObj.style.backgroundImg = “url(images/bg.gif)”;
iii.divObj.style.fontSize = “18px”;

//网页加载完成
window.onload = init;
function init(){
    //获取id=img01的图片对象
    var imgObj = document.getElementById("img01");
    //给<img>标签添加行内样式
    imgObj.style.width = "200px";
    imgObj.style.border = "2px solid red";
    imgObj.style.padding = "10px 20px";
    imgObj.style.backgroundColor = "blue";
}
</script>
</head>
<body>
<img id="img01" src="images/01.jpg" />

Event DOM：时间DOM

1、事件
时间主要实现“用户与网页的交互”
当时间发生时，去执行JS功能代码
如：
当点击图片（onClick），将图片放大两倍（JS代码）

2、常用事件
onload：当网页加载完成时。只能给用
onclick：当点击时，所有标签都适用
onscroll：当拖动滚动条时
onmouseover：当鼠标放上时
onmouseout：当鼠标移开时
onsubmit：当提交表单时
onreset：当重置表单时
onfocus：当获得焦点时，把光标定位到文本框中
onblur：当失去焦点时，把光标从文本框中移开
onchange：当下拉列表内容改变时。用在下拉列表、上传文件
onselect：当选中文本时
onresize：当改变窗口大小时，发生的事件
……

3、事件句柄属性
HTML标签，都有相应的事件属性。
每个HTML标签都对应一个元素对象，元素对象也具有相应的事件属性。
元素对象的事件属性应该是全小写。
事件属性后面调用的一般是JS函数，通过JS函数来完成相应的功能。

Event对象

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

DOM中Event对象

1、DOM中引入Event对象（DOM浏览器就是标准浏览器）
①通过HTML标记的事件属性来传递event对象
在DOM 中，event对象是作为事件调用函数时的参数传递给函数的。
该event参数，是系统固定的写法，全小写，不能加引号，它就是event对象参数。

//在HTML中，如何通过时间来传递event对象参数
function get_xy(e){
    //获取单机时，距离窗口左边和上边的距离
    alert(e.clientX+","+e.clientY);
}
</script>
</head>
<body style="margin:0px;">
<img src="images/01.jpg" width="200" onclick="get_xy(event)" />

②使用元素对象的事件属性来传递event对象

window.onload = fucntion(){
    //获取id=img01的图片对象
    var imgObj = document.getElementById("img01");
    //增加onclick事件
    imgObj.onclick = get_xy;//传地址，不带括号
}
//不能穿event参数，但形参必须接收
//第一个形参，一定是event对象。
function get_xy(){
    //获取单击时，距离窗口左边和上边的距离
    alert(e.clientX+","+e.clientY);
}
</script>
</head>
<body style="margin:0px">
<img src="images/01.jpg" width="200" id="img01" />

2、DOM中Event对象属性
type：当前的事件类型
clientX和clientY：距离窗口左边和上边的距离
pageX和pageY：距离网页左边和上边的距离
screenX和screenY：距离屏幕左边和上边的距离

IE中Event对象
IE中的event对象，是window对象的一个属性，可以通过window对象调用，而不需要传参数。

//在IE中，event对象的使用
//在IE中，event对象是window对象的一个属性，可以直接在函数中使用，而不需要传参数
function get_yx(){
    var str = "窗口左边距离："+event.clientX+"，窗口上边距离："+event.clientY;
    str +="\n网页左边距离："+event.x+"，网页上边距离："+event.y;
    str +="\n屏幕左边距离："+event.screenX+"，屏幕上边距离："+event.screenY;
    str += "\n时间类型："+event.type;
    window.alert(str);
}
</script>
</head>
<body>
<img width="200" src="images/01.jpg" onclick="get_xy()" />

杰希默克

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript初显轮廓

CSS DOM动态样式与style对象使用JS操作CSS中的各属性。 JS只能操作或修改行内样式。如：imgObj.style.border = “1px solid red” 对于类样式，通过className来赋值。如：imgObj.className = “imgClass”每个HTML标签都有一个style属性。但这个style属性又是一个style对象。 style对象的属性，与CS
复制链接

扫一扫

专栏目录