Js的样式操作

2015-06-26

样式操作

 1 访问样式可以通过标签的样式属性
 document.getElementById("box").style
 2 访问样式中具体的某个样式，可以通过style再去访问内部具体样式
 document.getElementById("box").style.width="100px"
  注意：设置的样式值为字符串形式，并且加单位！

遇到在css中需要加-的写法：background-color 在js中换成驼峰命名法
例如：设置background-acolor
document.getElementById(“box”).style.backgroundColor = “red”;

文本操作

1 innerHTML： 
（1）、    可以设置和获取纯文本
（2）、    可以设置和获取内部的标签：
使用innerhtml直接设置可以替换掉box内部的所有的内容
增加文字的方法： box.innerHTML=box.innerHTML+"内容"
2 innertext(html中某一对标签中的文字)
想要设置或者获取某个标签中间的文字内容，使用：innertext属性

innertext和value的区别

1 innerText 和 value 属性改变里面的内容进行设置 但innerText属性设置后，无论是页面还是elements(F12快捷键)中内容都改变     （只能设置或获取存文本）
2 value属性只能改变页面显示效果

事件

  作用：让页面可以捕获用户的操作
  事件的三要素
  1 每个事件都有三个必须的组成部分。
  事件源--触发事件的对象
  事件类型--如何触发
  事件处理程序--事件执行产生的结果

  2 事件的语法
  事件源.事件类型 = function(){
事件处理程序：代码会在用户触发事件时执行。
};

事件相关问题
现象：多次给一个标签添加同一事件，后设置的会覆盖前面的事件。
原理：一个属性名只能保存一个数据，一个方法名只能保存一个函数。

属性操作

1 添加属性：DOM元素 . setAttribute("属性名","属性值"); 
2 获取属性值： 获取属性值：DOM元素 .getAttribute("属性名"); 
属性名，属性值都是字符串类型，注意转化 
3 移除属性： 移除属性：DOM元素 . removeAttribute("属性的名字");  包含类样式 包含类样式 清除事件，清除事件冒泡，清除计时器 清除事件，清除事件冒泡，清除计时器