这是我参与2022首次更文挑战的第23天,活动详情查看:2022首次更文挑战
样式
大多数的属性名可以直接转换过来,但是float不能直接转换,因为float是JavaScript的保留字,不能够用作属性名。我们需要注意的是如果在标准模式下,所有的尺寸都必须包含单位,但是在混合模式下如果只设置了数值也相当于带了单位。
DOM
DOM2中也有style的属性和方法,例如length表示应用给元素的CSS属性数量。item表示返回索引为index的CSS属性名。removeProperty表示从样式中删除CSS属性propertyName。getPropertyValue用于返回propertyName的字符串值。cssText用于包含style属性中的CSS代码。我们可以把length结合item()方法一起使用。DOM2中document.defaultView上增加了getComputedStyle()方法,这个方法可以接收两个参数,分别为要取得计算样式的元素和伪元素字符串,第二个参数也可以传递为null。这个方法返回的是一个CSSstyleDeclaration对象。
for (let j = 0; l = box.style.length; j < l; j++) {
console.log(box.style[j])
}
CSS中一些样式继承属性,有disabled用来表示样式表是否被禁用了,设置为布尔值,如果为true则表示禁用样式。
media用来表示样式表支持的媒体类型集合,有length属性和item()方法。ownerRule用来表示样式表示使用@import导入的,指向导入规则,否则为null。deleteRule用来表示在指定位置删除cssRules中的规则。这个删除方法可以接收一个参数,就是要删除规则的索引。
sheet.deleteRule(1)
元素的尺寸
偏移尺寸包含元素在屏幕上占用的所有视觉空间,这个视觉空间由高度和宽度决定的。其中包括滚动条、内边距、边框,但是不包含外边距。常用的属性有offsetHeight用来表示元素在垂直方向上占用的像素尺寸,其中有水平滚动条的高度,自身高度以及上下边框的高度。offsetTop用来表示元素上边框外侧距离包含元素上边框内侧的像素数。offsetWidth用来表示元素在水平方向上占用的像素尺寸,其中包括它的宽度、垂直滚动条的宽度和左右变宽的宽度。客户端的尺寸我们可以使用clientWidth和clientHeight属性。其中clientWidth表示内容区宽度左右内边距宽度。clientHeight表示内容区高度上下内边距高度。滚动尺寸的相关属性有scrollHeight表示没有滚动条出现时,元素内容的总高度。scrollTop表示内容区顶部隐藏的像素数。scrollLeft表示内容区左侧隐藏的像素数。scrollWidth表示没有滚动条出现时,元素内容的总宽度。