JS操作CSS及处理方法.pdfVIP

CSSDOM动态样式

使用JS操作CSS中的各属性。

JS只能操作或修改行内样式。如：imgObj.style.border=“1pxsolidred”

对于类样式，通过className来赋值。如：imgObj.className=“imgClass”

style对象

每个HTML标记，都有一个style属性。但这个style属性又是一个style对象。

那么，这个style对象的属性有哪些？style对象的属性，与CSS中的属性，一一对应。

因此，style对象用来代替CSS。

如：imgObj.style.border=“1pxsolidred”;

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

1）如果是一个单词，style对象属性，与CSS属性一样。

2）如果是多个单词，第1单词全小写，后面每个单词首字母大写，并去掉中划线。

i.divObj.style.backgroundColor=“red”;

ii.divObj.style.backgroundImage=“url(images/bg.gfi)”;

iii.divObj.style.fontSize=“18px”;

EventDOM：DOM

1、简介

CSSDOM动态样式

使用JS操作CSS操作中的各属性。JS只能或修改行样式。如:

imgObj.style.border=“1pxSolidred”对于类样式，通过

className来属性。如:imgObj.className=“imgClass”

风格对象

每个HTML标记，都有一个style属性。但这个style属性又是一个style对象。那

么，这个style对象的属性有哪些？style对象的属性，与CSS中的属性，一一对应。

因此，style对象用来代替CSS。如：imgObj.style.border=“1pxSolidred”;

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

1）如果是多个单词，第1个单词全小写，后面每个单词首字母大写，并去掉中划线。

divObj.style.backgroundColor=“红色”;二.

divObj.style.backgroundImage=“url(images/bg.gfi)”;三.

divObj.style.fontSize=“18px”;

DOM：DOM

1、简介

主要实现“用户与网页的交互”。

当发生时，去执行JS功能代码。

当点击时(onClick)，将放大两倍(JS代码)。

当网页加载完成时(onLoad)，弹出一个小窗口。

当鼠标放到滚动文本上时(onMouseOver)，文本停止滚动。

当向下拖动滚动条时(onscroll)，文本向上滚动。

……

2、常用

onload：当网页加载完成时。只能给body用。

onclick：当点击时，所有标记都适用。

onscroll：当拖动滚动条时

onmouseover：当鼠标放上时

onmouseout：当鼠标移开时

onsubmit：当提交表单时

onreset：当重置表单时

onfocus：当获得焦点时，把光标