JS中的DOM样式操作

DOM样式操作

1.CSS样式操作

我们可以通过 元素节点.style.样式 来设置行内style样式

1.1 获取行内样式
注意: 只能获取行内样式，样式名采用的是驼峰命名法则。

window.onload = function () {
    var box = document.getElementById("box");
    console.log(box.style.backgroundImage);
    console.log(box.style.width);
}

1.2 设置行内样式
1.2.1 设置单个样式
注意：设置的是行内样式，样式名采用的是驼峰命名法则。

window.onload = function () {
    var box = document.getElementById("box");
    box.style.width = "300px";
    box.style.backgroundImage = "url(testImg/test01_" + 2 + ".jpg)"
}

1.2.2 设置多个样式
使用 元素节点.style.cssText 来设置多个样式，每个样式由分号( ；)隔开。

window.onload = function () {
    var box = document.getElementById("box");
    box.style.cssText = "width: 300px; background-image: url(
                                         testImg/test01_2.jpg);";
}

2.CSS尺寸

clientWidth: 获取对象可见内容的宽度（包含padding，不含border），element.clientWidth = width + padding；

clientHeight: 获取对象可见内容的高度（包含padding，不含border）, element.clientHeight = height + padding；