您的位置:首页 > Web前端 > CSS

JS中的DOM样式操作

2019-01-18 21:47 686 查看

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;

内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: