CSS操作

    操作内联样式

 

设置内联样式

element.style.attrName = attrValue

代码

var div1 = document.getElementById(‘div1’);

div1.style.backgroundColor = ‘lightseagreen’;

 

获取内联样式

var attrValue = element.style.attrName

代码

var div1 = document.getElementById(‘div1’);

var show = document.getElementById(‘show’);

show.innerHTML = ‘div 标签的背景色为: ‘ + div1.style.backgroundColor;

 

 

DOM属性操作内联样式

设置内联样式

setAttribute(‘style’, CSS 样式内容)

获取内联样式

getAttribute(‘style’)

 

 

获取当前有效样式

window.getComputedStyle(element, [pseudoElt])

 

代码

var p1 = document.getElementById(‘p1’);

var result = window.getComputedStyle(p1, null);

console.log(result.color);

 

 

参数

element

表示获取当前有效样式的标签

[pseudoElt]

可选，用于匹配伪元素

如果操作的是普通元素，必须为null

返回值

返回指定标签的当前有效样式

存在IE8及之前兼容问题

解决方案

代码

// 浏览器解决方案

function getStyle(elem){

var result;

// 优先判断使用频率高的

if (window.getComputedStyle){

result = window.getComputedStyle(elem, null);

} else {

result = elem.currentStyle;

}

return result;

}

 

 

 

 

    获取可见宽度和高度

 

可见高度

clientWidth

content-box

clientWidth = width + padding-left + padding-right

border-box

clientWidth = width – border-left – border-right

 

 

可见宽度

clientHeight

content-box

clientHeight = height + padding-top + padding-bottom

border-box

clientHeight = height – border-top – border-bottom

 

 

获取实际宽度和高度

 

宽度

offsetWidth

content-box

offsetWidth = width + padding + border

border-box

offsetWidth = width

 

高度

offsetHeight

content-box

offsetWidth = width + padding + border

border-box

offsetHeight = height

 

获取定位父元素

 

element.offsetParent

作用

获取当前元素的祖先元素中第一个开启定位的元素

情况

如果祖先元素中没有一个开启定位，直接寻找<body>

如果祖先元素中只有一个元素开启定位，寻找开启定位的元素

如果祖先元素中有多个开启了定位，寻找距离当前元素最近的开启定位的元素

 

代码

var d3 = document.getElementById(‘d3’);

// 获取当前节点的父节点

console.log(d3.parentNode);

 

 

获取滚动相关的属性

属性

 

scrollWidth

获取指定标签滚动区的宽度

 

scrollLeft

获取水平滚动条滚动的距离

 

scrollTop

获取垂直滚动条滚动的距离

当滚动到容器的底部时

最大值是容器顶部距离内容顶部的值

 

scrollHeigth

获取指定标签滚动区的高度

当滚动到容器的右底部时

最大值是容器左顶部距离内容右顶部的值

 

当前页面

 

widow对象

当前浏览器窗口

 

documen对象

当前HTML文档

IE8及之前版本不支持

 

滚动事件

sroll事件

滚动事件

mousewheel

鼠标滚轮事件

打赏

发表评论

邮箱地址不会被公开。 必填项已用*标注