DOM05-DOM2和DOM3

最新推荐文章于 2021-07-07 11:22:07 发布

silence_xiang

最新推荐文章于 2021-07-07 11:22:07 发布

阅读量355

点赞数

分类专栏： JavaScript

本文链接：https://blog.csdn.net/silence_xiang/article/details/105351884

版权

JavaScript 专栏收录该内容

17 篇文章 0 订阅

订阅专栏

1.访问元素的样式

 //1.访问元素的样式
    var div1 = document.getElementById("div1");
    //设置样式 ,也可以同样取得其中的特性
    div1.style.backgroundColor = 'pink';
    div1.style.width = "100px";
    div1.style.height = "100px";

1.1DOM样式属性和方法

"DOM2级样式"规范还为style对象定义了一些属性和方法,这些属性和方法在提供元素的style特性值的同时,也可以修改样式.如下

cssText:通过它能够访问到style特性中的css的代码
length:应用给元素的CSS属性的数量
parantRule:表示CSS信息的CSSRule对象
getPropertyCSSValue(propertyName):返回包含给属性值的CSSValue对象(好像es6不支持)
getPropertyPriority(propertyName):如果给定的属性使用了important设置,则返回"important",反之则返回空字符串
getPropertyValue(propertyName):返回给定的属性的字符串
item(index):返回给定位置的CSS属性的名称
removeProperty(propertyName):从样式中删除给定属性
setProperty(propertyName,value,priority):将给定属性设置为相应的值,并加上优先权标志("important"或者空字符串)

item()方法与length相对应

 var div2 = document.getElementById("div2");
    div2.style.cssText = "background-color:pink;width:100px;height:200px;";

    // 取得css属性
    for (let i = 0; i < div2.style.length; i++) {
        //const element = div2.style[i];
        //作用相同
        const element = div2.style.item(i);
        console.log(element);
    }

1.2计算的样式

“DOM2级样式"规范增强了document.defaultView,提供了getComputeStyle()方法,接收两个参数
参数1:要取得计算样式的元素
参数2:一个伪元素字符串(如”:after"),如果不需要伪元素信息,该参数可以为null

假设页面元素为

<style>
    .div3 {
        background-color: pink;
        width: 100px;
        height: 200px;
    }
</style>
<body>
    <div id="div3" class="div3" style="background-color: skyblue;border: 1px solid black;">div3</div>
</body>

通过getComputedStyle()取得元素计算后的样式:

var div3 = document.getElementById("div3");
    var computedStyle = document.defaultView.getComputedStyle(div3,null);
    console.log(computedStyle.backgroundColor);
    console.log(computedStyle.width);
    console.log(computedStyle.height);
    console.log(computedStyle.border);

输出结果:
在这里插入图片描述

1.3元素大小

1.**偏移量:**元素在屏幕上占用的所有可见的空间.

通过下面4个属性可以取得元素偏移量

offsetHeight:元素在垂直方向上占用的空间大小,以像素计.包括元素的高度,()可见性)水平滚动条的高度,上边框高度和下边框高度
offsetWidth:元素在水平方向上占用的空间大小,以像素计,包括元素的宽度,(可见性)垂直滚动条的高度,左边框宽度和右边框宽度
offsetLeft:元素的左外边框至包含元素的左内边框之间的像素距离.
offsetTop:元素的上外边框至包含元素的上内边框之间的像素距离

如下图解释:
在这里插入图片描述

2.客户区大小:指的是元素内页及其内边距所占的空间大小

clientWidth:元素内容区宽度加上左右内边距两边距宽度
clientHeight:元素内容区高度加上上下内边距高度

3.滚动大小:指包含滚动内容的元素的大小.
有些元素如html不需要执行任何代码就可以自动的添加滚动条,但另外一些元素则需要CSS的overflow属性来设置滚动.

4个与滚动大小相关的属性:

scrollHeight:在没有滚动条的情况下,元素内容的总高度
scrollWidth:在没有滚动条的情况下,元素内容的总宽度
scrollLeft:被隐藏在内容区域左侧的像素数,通过设置这个属性可以改变元素的滚动位置
scrollTop:被隐藏在内容区域上方的像素数,通过设置这个属性可以改变元素的股东位置.

在这里插入图片描述

silence_xiang

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
DOM05-DOM2和DOM3

1.访问元素的样式 //1.访问元素的样式 var div1 = document.getElementById("div1"); //设置样式 ,也可以同样取得其中的特性 div1.style.backgroundColor = 'pink'; div1.style.width = "100px"; div1.style.height = "100px"...
复制链接

扫一扫

专栏目录