自定义属性操作
-
getAttribute() 获取标签行内属性
-
setAttribute() 设置标签行内属性
-
removeAttribute() 移除标签行内属性
-
与element.属性的区别: 上述三个方法用于获取任意的行内(自定义)属性。
样式(css)操作
样式显示在标签行内
var div1 = document.getElementById('div1');
div1.style.width = '100px';
属性值是字符串,必须加上单位
类名操作
- 修改标签的className属性相当于直接修改标签的类名
var box = document.getElementById('box');
box.className = 'show';
class属性为什么用className来表示
class是关键字,定义变量,属性不能用关键字
创建元素的三种方式
1.document.write()
document.write('新设置的内容<p>标签也可以生成</p>');
2.innerHTML
var box = document.getElementById('box');
box.innerHTML = '<p>新标签</p>';
3.document.createElement()
var div = document.createElement('div');
document.body.appendChild(div);
div.innertext="我是一个div"
事件详解
注册/移除事件的三种方式
1.
btn.onclick = function() {
alert(2);
}
2.btn.addEventListener('click', function() {
alert(1);
});
3.兼容低版本浏览器
btn.attachEvent('onclick',回调函数)
事件的三个阶段
- 捕获阶段
- 当前目标阶段
- 冒泡阶段
参数为false是冒泡 为true是捕获
事件对象的属性和方法
- event.type 获取事件类型
- clientX/clientY 所有浏览器都支持,窗口位置
- pageX/pageY IE8以前不支持,页面位置
- event.target || event.srcElement 用于获取触发事件的元素
- event.preventDefault() 取消默认行为
- 跟着鼠标飞的天使
<img src="../img/tiamui.jpeg" alt="" id="tmui" width="200">
<script>
var tmui=document.getElementById("tmui")
/*mousemove:监听鼠标的移动*/
document.onmousemove=function (ev) {
/*兼容性操作*/
/*1.client是以页面最上面为基准 如果页面只有1000px的高度不会滚动
* 只会在这个页面进行滚动
* */
/*2.如果页面高为3000px 那么是可以滚动的 此时cient就是还是以
第一个页面的1000px为准
page则是在下一个3000px的页面随之而滚动 适应性更好 推荐使用
* */
/*3.ev是一个事件的意思 他输出的是一个数值所以要加上一个引号可以转换成
* 字符串 字符串需要单位 常常使用px
* 这样就会随着鼠标的移动图片也跟着移动了 */
// tmui.style.left=ev.clientX+"px"
// tmui.style.top=ev.clientY+"px"
tmui.style.left=ev.pageX+"px"
tmui.style.top=ev.pageY+"px"
}
</script>
阻止事件传播的方式
- 标准方式 event.stopPropagation();
- IE低版本 event.cancelBubble = true; 标准中已废弃
常用的鼠标和键盘事件
- onmouseup 鼠标按键放开时触发
- onmousedown 鼠标按键按下触发
- onmousemove 鼠标移动触发
- onkeyup 键盘按键按下触发
- onkeydown 键盘按键抬起触发