DOM—节点操作

改变样式的属性

style属性

className属性

style属性

HTML元素.style.样式属性＝"值"

document.getElementById("titles").style.color="#ff0000";

document.getElementById("titles").style.fontSize="25px ";

className属性

 1、HTML元素.className="样式名称"

function over(){

     document.getElementById("a").className="c";

     document.getElementById("b").className="d"

}

 // ☆ 连续追加className

        document.querySelector("div").classList.add = "div";

元素.classList.remove="div" 删除之前的class名称

元素.classList.replace（“”，“”）="div" t  替换已存在的类名，第一个参数找到已存在的class名称，第二个参数为替换的class名称

获取元素的样式

HTML元素.style.样式属性;

alert(document.getElementById("cartList").display);

document.defaultView.getComputedStyle(元素,null)

var cartList=document.getElementById("cartList");

alert(document.defaultView.getComputedStyle(cartList,null).display

getComputedStyle获取的样式是最全的，甚至可以获取到style行内样式的属性值

兼容IE浏览器

alert(document.getElementById("cartList").currentStyle.display);

currentStyle方法，所有的IE版本浏览器都支持，谷歌不支持currentStyle方法，用于内部样式，外部样式

 

操作节点样式

如何实现鼠标移至div显示内容？

名称 描述

onclick 当用户单击某个对象时调用事件

onmouseover 鼠标移到某元素之上

onmouseout 鼠标从某元素移开

onmousedown 鼠标按钮被按下

onmousepress 鼠标按钮被按下时触发但是他不识别功能键比如ctrl shift 键头等

onmouseup     鼠标按钮被抬起,松开时触发

HTML中元素属性

元素属性应用

属性 说明

offsetLeft 返回当前元素左边界到它上级元素的左边界的距离，只读属性

offsetTop 返回当前元素上边界到它上级元素的上边界的距离，只读属性

offsetHeight 返回元素的高度

offsetWidth 返回元素的宽度

offsetParent 返回元素的偏移容器，即对最近的动态定位的包含元素的引用

如果本身是position :absolute 父级是position:relative,因此offsetParent的值是父级；

如果本身是position :absolute 父级是没有定位,offsetParent的值是body

如果本身是position :fixed 父级有没有定位,offsetParent的值都是null

clientWidth 返回元素的可见宽度

clientHeight 返回元素的可见高度

clientWidth 、clientHeight 不包括border的大小，offsetHeight和offsetWidth 包括border的大小

标准浏览器

scrollTop 返回匹配元素的滚动条的垂直位置

scrollLeft 返回匹配元素的滚动条的水平位置

在谷歌浏览器中可以识别 Chrome

document.documentElement.scrollTop;

document.documentElement.scrollLeft;

下面的写法只是针对低版本Ie浏览器，例如IE5

document.body.scrollTop;

document.body.scrollLeft;

解决兼容问题：

var sop=document.documentElement.scrollTop||document.body.scrollTop;

例题：题目要求：保证盒子在浏览器上下滚动式保持不动