用java scrip改变css样式和用jquery改变css样式
·
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#aa{
width: 300px;
height: 300px;
background: rgba(24, 27, 214, 0.8);
}
</style>
<script src="jquery-3.5.1.js"></script>
</head>
<body>
<div id="aa"></div>
<button id="a" type="button" onclick="width()">变宽</button>
<button id="b" type="button" onclick="height()">变高</button>
<button id="c" type="button" onclick="bg()">变色</button>
<button id="d" type="button" onclick="wbg()">变小有变红</button>
<script>
let oA=document.getElementById("aa");
function width(){
oA.style.width="500px";
}
function height(){
oA.style.height="500px";
}
function bg(){
oA.style.backgroundColor="rgba(62, 214, 24, 0.8)";
}
// function wbg(){
// oA.style.backgroundColor="rgba(107, 7, 7, 0.8)";
// oA.style.width="200px";
// oA.style.height="200px";
// }
// jQuery写法
let oA2=$("#aa");
function wbg(){
// 方法一:
// oA2.css("background","rgba(107, 7, 7, 0.8)");
// oA2.css("width","200px");
// oA2.css("height","200px");
// 方法二：
// oA2.css("background","rgba(107, 7, 7, 0.8)").css("width","200px").css("height","200px");
// 方法三：
oA2.css({"background":"rgba(107, 7, 7, 0.8)","width":"200px","height":"200px"})
}
</script>
</body>
</html>
```css
```css
在这里插入代码片
魔乐社区（Modelers.cn) 是一个中立、公益的人工智能社区，提供人工智能工具、模型、数据的托管、展示与应用协同服务，为人工智能开发及爱好者搭建开放的学习交流平台。社区通过理事会方式运作，由全产业链共同建设、共同运营、共同享有，推动国产AI生态繁荣发展。
更多推荐
0
0- 0
已为社区贡献2条内容
所有评论(0)