JavaScript_DOM_样式

JavaScript_DOM_样式

1. DOM的样式的控制

   1. 得到标签属性:标签对象.style

   2. 样式的属性:标签对象.style.border = “1px; solid”

      ​ 标签对象.className = “div”

      ​

2. 事件

   ​ 常见事件类型:

   属性	当以下情况发生时，出现此事件	FF	N	IE
   onabort	图像加载被中断	1	3	4
   onblur	元素失去焦点	1	2	3
   onchange	用户改变域的内容	1	2	3
   onclick	鼠标点击某个对象	1	2	3
   ondblclick	鼠标双击某个对象	1	4	4
   onerror	当加载文档或图像时发生某个错误	1	3	4
   onfocus	元素获得焦点	1	2	3
   onkeydown	某个键盘的键被按下	1	4	3
   onkeypress	某个键盘的键被按下或按住	1	4	3
   onkeyup	某个键盘的键被松开	1	4	3
   onload	某个页面或图像被完成加载	1	2	3
   onmousedown	某个鼠标按键被按下

   onmousemove	鼠标被移动	1	6	3
   onmouseout	鼠标从某元素移开	1	4	4
   onmouseover	鼠标被移到某元素之上	1	2	3
   onmouseup	某个鼠标按键被松开	1	4	4
   onreset	重置按钮被点击	1	3	4
   onresize	窗口或框架被调整尺寸	1	4	4
   onselect	文本被选定	1	2	3
   onsubmit	提交按钮被点击	1	2	3
   onunload	用户退出页面

3. 案例_表格全选

4. 案例_表单检验

5. Bootstrap

   1. 框架:已经开发的功能,组成一个组件,形成框架.在自己的工程中导入框架,使用其功能,可以提高啊开发效率,提升用户体验效果.

   2. 好处:提供了一些标签的样式,输入框,按钮,图片,导航栏,可以使标签更加精美

      ​ 提供了自适配所有屏幕:通过响应式交互实现

      ​ 使用了一个栅格系统来实现响应式交互

   3. 容器的样式

      1. .container: 左右有空白
      2. .contained-fluid: 100%布满屏幕
      3. 栅格系统:
         1. 外层容器使用样式为 .container .contained-fluid 相当于table,行容器为row相当于tr
         2. 屏幕大小的类型:
            1. .col-xs- :超小屏幕
            2. .col-sm- :小屏幕
            3. .col-md- :中等屏幕
            4. .col=lg- :超大屏幕
         3. 栅格系统的注意事项
            1. 如果屏幕大小达到指定占用的栅格宽度,会自动适应宽度
            2. 如果屏幕大小达到栅格指定宽度,会自动占据一行
            3. 如果一行占用的宽度超过12格栅格,会自动换行.