JS DOM之操作CSS属性
JS DOM之操作CSS属性
- 1.获取CSS属性值
- 2.设置CSS属性值
- style对象
- cssText属性
1.获取CSS属性值
在JavaScript中，我们可以使用getComputedStyle()方法来获取一个CSS属性的取值
语法：
getComputedStyle(obj).attr
bj表示DOM对象，也就是通过getElementById()、getElementsByTagName()等方法获取的元素节点
attr表示CSS属性名。需要注意的是，这里的属性名使用的是“骆驼峰型”的CSS属性名。如font-size应该写成fontSize,border-bottom-width应该写成borderBottomWidth
案例：
DOCTYPE html>
<html>
<head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><title>TEXTtitle><style type="text/css">#box {width: 100px;height: 100px;background-color: hotpink;}style><script src="js/index.js">script>
head>
<body><input type="button" id="btn" value="获取颜色"/><div id="box">div>
body>
html>
window.onload=function () {var oBtn = document.getElementById("btn");var oBox = document.getElementById("box");oBtn.onclick = function() {alert(getComputedStyle(oBox).backgroundColor);};
}
点击获取颜色后，后弹出当前div的背景颜色信息，成功获取了CSS的属性信息：
2.设置CSS属性值
在JavaScript中，想要设置一个CSS属性的值，有两种方式可以实现。style对象。cssText属性。
style对象
使用style对象来设置一个CSS属性的值，其实就是在元素的style属性中添加样式，这种方式设置的是“行内样式”
例如，我们想实现一个div点击变色的功能：
window.onload=function () {var oBtn = document.getElementById("btn");var oBox = document.getElementById("box");oBtn.onclick = function() {oBox.style.backgroundColor = "red";};
}
如果想要为上面的div元素同时添加多个样式，实现代码如下：
width:50px;height:50px;background-color:lightskyblue;
如果用style来实现，就得一个个写：
oDiv.style.width="50px";
oDiv.style.depth="50px";
oDiv.style.backgroundColor="lightskyblue";
一个个写十分烦琐。那么，有没有一种相对高效的实现方式呢？当然有，那就是cssText属性
cssText属性
注意，这个字符串中的属性名不再使用骆驼峰型的写法，而是使用平常的CSS写法😽
例如：
window.onload=function () {var oBtn = document.getElementById("btn");var oBox = document.getElementById("box");oBtn.onclick = function() {oBox.style.cssText = "background-color:blue;width:200px;height:200px;"};
}
当我们点击按钮之后，不仅背景颜色会发生改变，div块的大小也会发生改变
在实际开发的时候，如果要为一个元素同时设置多个CSS属性，我们很少使用cssText来实现，而更倾向于使用操作HTML属性的方式给元素加上一个class属性值，从而整体地给元素添加上样式🙀
本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！