通过css样式操作语法，我们可以动态的改变元素的样式，大多数的页面特效都是这样实现的。
关于样式的设置方法非常多，我们只讲解一些常用的，大家先掌握我们讲解的方法，以后再慢慢深入。
一、原生JS设置CSS样式的三种方法
请看以下代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>原生JS和jquery设置CSS样式操作</title>
<script src="./jquery.js"></script>
</head>
<style>
#box1{
width: 300px;
height: 300px;
background-color: aqua;
}
</style>
<body>
<div id="box">
<span id="span1">span1</span>
</div>
<br>
<div id="box1">
</div>
</body>
<script>
//方法一 最简单的办法
var box=document.getElementById('box');
box.style.height="200px";
box.style.width="200px";
box.style.backgroundColor="#E5C07B";
box.style.fontSize="30px";
//方法二 cssText支持追加
// var box=document.getElementById('box');
// box.style.cssText ="height:200px;width:200px;background-color:#E5C07B;font-size:30px;";
// box.style.cssText +="border-radius: 5%;";
//方法三 设置节点的style属性
// var box=document.getElementById('box');
// box.setAttribute('style',"height:200px;width:200px;background-color:#E5C07B;font-size:30px;");
//取样式 只能取出行内样式
console.log(box.style.height,box.style.width,box.style.backgroundColor,box.style.fontSize)
//取最终样式 解决由于多种样式叠加，导致获取css不准确的问题
var box1=document.getElementById('box1');
//这样取不到
console.log(box1.style.height,box1.style.width,box1.style.backgroundColor,box1.style.fontSize);
//这样可以取到
console.log(getComputedStyle(box1).height);
</script>
</html>
解释一下：
以上代码中，我们写了两个div盒子，分别是box和box1，然后使用了三种方式对id为box的div盒子添加了样式。
最后又进行了取样式操作，也用了两种方式。
方式一、只能取出行内样式，如果一个元素的样式是有多种样式叠加的则不能取出。
例如：一个元素的样式分别写在了页面中的style标签中、行内和css文件中。方式一只能取出行内的样式，可以看到，在控制台中第二行的输出是空的。
方式二、可以取出最终的样式。
另外需要注意的是：在使用JS批量设置css样式时，样式名中如果包含大写字母，将大写变小写，并在该前面的前面加中横线。
例如：backgroundColor要写为background-color。
ok，以上就是原生JS和jquery设置CSS样式操作，请大家动手测试一下。
|
窥视卡
雷达卡
发表于 2023-1-26 13:25:24
提升卡
置顶卡
沉默卡
喧嚣卡
变色卡
千斤顶
显身卡
发表于 2023-2-20 07:39:46
