标签对象
CSS操作
CSS样式表是对HTML标签的外观进行定义,几乎所有的HTML标签都有Class属性和Style属性
CSS操作
HTML中与CSS相关的标签属性
class属性
style属性
同时包含有class属性和style属性
标签将使用class和style属性指定的所有样式
如果class和style属性指定了两个相同的样式,那么使用style属性定义的样式取代class属性定义的样式
使用JavaScript可以动态改变style属性,从而改变标签的样式,也就是改变标签的显示方式
style属性-语法:
<element>.style.<sheettype>=<value>
element 需要改变样式的标签对象
style 标签对象的style属性
sheettype 样式的类型
注意:在JavaScript中书写方式和CSS样式表和Style属性中样式书写方式有所不同
style属性 - css样式表和style属性之间的关系:
如果是简单样式类型,即只有一个英文单词的样式类型,那么两者的书写方式相同。
如果是复合样式类型,即有两个英文单词的样式类型,那么JavaScript中的书写方式为第一个单词全部小写,第二个单词的首字母大写,其余小写;在css和style中,两个单词全部使用小写,单词之间使用“-”符号分隔
style属性 - css样式表和style属性之间的关系:
例如:
css书写方式 JavaScript书写方式
color color
font-size fontSize
background-image backgroundImage
注意:使用style属性可以改表标签style属性定义的样式,不可以改变class属性定义的样式
css样式表可以定义标签外观,在标签中引用css样式表使用class属性,在JavaScript中使用className属性来引用标签对象的样式class属性-语法
<element>.className=<cssName>
element 需要改变样式的标签对象
className 表示引用标签的class属性
cssName 样式表名称css样式表和style 属性之间的关系DIV操作
DIV标签与层
DIV标签在HTML语言中有着重要作用,DIV标签在网页上表示为层。层是网页上的一个容器,它可其他的标签。DIV标签的位置有两种,一种的相对位置,一种是绝对位置。相对位置表示层的位置由包含DIV标签的上层标签的位置确定,绝对位置是指直接在DIV标签中指定在页面上的坐标。
绝对位置的层可以叠加,也就是说一个层可以位于另外一个层的上面,上面的层覆盖下面的层。也就是说,绝对位置的层由三个方向,X方向代表着离网页左边界的位置,Y方向代表离网页上边界的位置,Z方向表示层的叠加顺序。
DIV标签的重要属性
ALIGN ?设置或获取对象相对于显示或表格的排 列方式
CLASS ?设置或获取对象的类。
DISABLED ?设置或获取控件的状态。
NOWRAP ?设置或获取浏览器是否自动执行换行
ID ?获取标识对象的字符串 。
STYLE ?为该设置元素设置内嵌样式。
TABINDEX ?设置或获取定义对象的 Tab 顺序的索引 JavaScript中DIV对象的重要属性
align 设置或获取对象相对于显示或表格的排列方式
className 设置或获取对象的类
clientHeight/ clientWidth/ clientTop/ clientLeft 获取对象的高度 、宽度、上和左坐标disabled 设置或获取控件的状态
innerHTML 设置或获取位于对象起始和结束标签内的 HTML
offsetHeight /offsetWidth /offsetTop /offsetLeft 获取对象相对于版面或由父坐标 offsetParent 属性指定的父坐标的高度、宽度、上和左坐标
offsetParent 获取定义对象 offsetTop 和 offsetLeft 属性的容器对象的引用
parentElement 获取对象层次中的父对象
scrollHeight /scrollWidth /scrollTop /scrollLeft 获取对象的滚动高度、宽度、上和左坐标移动DIV层DIV标签的事件
onblur 在对象失去输入焦点时触发。
onclick 在用户用鼠标左键单击对象时触发。
onfocus 当对象获得焦点时触发。
onkeydown 当用户按下键盘按键时触发。
onkeypress 当用户按下字面键时触发。
onkeyup 当用户释放键盘按键时触发。
当用户将鼠标划过对象时触发。
当用户将鼠标指针移出对象边界时触发。
当用户在鼠标位于对象之上时释放鼠标按钮时触发。 event 对象
clientX /clientY 设置或获取鼠标指针位置相对于窗口客户区域的 x 坐标/y坐标,其中客户区域不包括窗口自身的控件和滚动条
clientX /clientY 设置或获取鼠标指针位置相对于窗口客户区域的 x 坐标/y坐标,其中客户区域不包括窗口自身的控件和滚动条
offsetX /offsetY 设置或获取鼠标指针位置相对于触发事件的对象的 x 坐标/y坐标
altKey /ctrlKey/shiftKey 设置或获取 Alt 键/CTRL键/ SHIFT键的状态
altLeft /ctrlLeft/shiftLeft 设置或获取左 Alt 键/CTRL键/SHIFT键的状态
returnValue 设置或获取事件的返回值
srcElement 设置或获取触发事件的对象
Type 从 event 对象中获取事件名称
fromElement 设置或获取事件发生时激活或鼠标将要离开的对象
keyCode 设置或获取与导致事件的按键关联的 Unicode 按键代码
propertyName 设置或获取对象上发生更改的属性名称
onmouseout 当用户将鼠标指针移出对象边界时触发
onmouseup 当用户在鼠标位于对象之上时释放鼠标按钮时触发