继续浏览精彩内容
慕课网APP
程序员的梦工厂
打开
继续
感谢您的支持,我会继续努力的
赞赏金额会直接到老师账户
将二维码发送给自己后长按识别
微信支付
支付宝支付

CSS标签对象

关注TA
已关注
手记
粉丝
获赞

         标签对象
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 当用户在鼠标位于对象之上时释放鼠标按钮时触发

打开App,阅读手记
0人推荐
发表评论
随时随地看视频慕课网APP