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;
相关文章推荐
- js学习小结(十)2014.5.10.11(DOM2和DOM3的变化,操作样式的DOM API(1))
- js--Dom(四) 样式+节点操作
- JS 操作Dom节点之样式
- css的hover事件,如果点击之后通过js操作样式,hover事件就会失效的处理方法,外部css样式与js的DOM样式谁的权重高?
- 【JS总结】——DOM操作表格和样式
- css的hover事件,如果点击之后通过js操作样式,hover事件就会失效的处理方法,外部css样式与js的DOM样式谁的权重高?
- js操作dom样式
- JS DOM操作(二) Window.docunment对象——操作样式
- HTML DOM基本操作,附js代码
- js dom基本操作
- 迷你MVVM框架 avalonjs 沉思录 第2节 DOM操作的三大问题
- 常见DOM操作(JS)
- JS之简单DOM操作
- 关于js中DOM样式的学习笔记
- 【JS--DOM-节点操作1】 基础 (待整理)
- JS---DOM操作有哪一些
- JS DOM操作(四) Window.docunment对象——操作内容
- 使用Jquery与vuejs操作dom比较
- js 操作dom
- 网站开发进阶(四十六)JS进行DOM操作