标签对象
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-p_w_picpath backgroundImage
注意:使用style属性可以改表标签style属性定义的样式,不可以改变class属性定义的样式
css样式表可以定义标签外观,在标签中引用css样式表使用class属性,在JavaScript中使用className属性来引用标签对象的样式
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-p_w_picpath backgroundImage
注意:使用style属性可以改表标签style属性定义的样式,不可以改变class属性定义的样式
css样式表可以定义标签外观,在标签中引用css样式表使用class属性,在JavaScript中使用className属性来引用标签对象的样式
class属性-语法
<element>.className=<cssName>
element 需要改变样式的标签对象
className 表示引用标签的class属性
cssName 样式表名称css样式表和style 属性之间的关系
<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 顺序的索引
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 获取对象的高度 、宽度、上和左坐标
align 设置或获取对象相对于显示或表格的排列方式
className 设置或获取对象的类
clientHeight/ clientWidth/ clientTop/ clientLeft 获取对象的高度 、宽度、上和左坐标
disabled 设置或获取控件的状态
innerHTML 设置或获取位于对象起始和结束标签内的 HTML
offsetHeight /offsetWidth /offsetTop /offsetLeft 获取对象相对于版面或由父坐标 offsetParent 属性指定的父坐标的高度、宽度、上和左坐标
offsetParent 获取定义对象 offsetTop 和 offsetLeft 属性的容器对象的引用
parentElement 获取对象层次中的父对象
scrollHeight /scrollWidth /scrollTop /scrollLeft 获取对象的滚动高度、宽度、上和左坐标
innerHTML 设置或获取位于对象起始和结束标签内的 HTML
offsetHeight /offsetWidth /offsetTop /offsetLeft 获取对象相对于版面或由父坐标 offsetParent 属性指定的父坐标的高度、宽度、上和左坐标
offsetParent 获取定义对象 offsetTop 和 offsetLeft 属性的容器对象的引用
parentElement 获取对象层次中的父对象
scrollHeight /scrollWidth /scrollTop /scrollLeft 获取对象的滚动高度、宽度、上和左坐标
移动DIV层
DIV标签的事件
onblur 在对象失去输入焦点时触发。
onclick 在用户用鼠标左键单击对象时触发。
onfocus 当对象获得焦点时触发。
onkeydown 当用户按下键盘按键时触发。
onkeypress 当用户按下字面键时触发。
onkeyup 当用户释放键盘按键时触发。
当用户将鼠标划过对象时触发。
当用户将鼠标指针移出对象边界时触发。
当用户在鼠标位于对象之上时释放鼠标按钮时触发。
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 当用户在鼠标位于对象之上时释放鼠标按钮时触发
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 当用户在鼠标位于对象之上时释放鼠标按钮时触发
转载于:https://blog.51cto.com/youxue/51108