用java scrip改变css样式和用jquery改变css样式

最新推荐文章于 2022-03-04 17:39:17 发布

zayyo

最新推荐文章于 2022-03-04 17:39:17 发布

阅读量178

点赞数

分类专栏：前段 html 文章标签： javascript css html5 jquery html

本文链接：https://blog.csdn.net/weixin_45215308/article/details/106266552

版权

html 同时被 2 个专栏收录

19 篇文章 0 订阅

订阅专栏

前段

2 篇文章 0 订阅

订阅专栏



<!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
在这里插入代码片

zayyo

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
用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; ..
复制链接

扫一扫