jQuery设置获取样式css()




DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
    <style>
        #div1 {
            height: 200px;
            background-color: pink;
            border: 2px solid red;
        }
    style>
head>
<body>
    <input type="button" value="获取" id="getBtn"/>
    <input type="button" value="设置" id="setBtn"/>
    <div id="div1" style="width:200px">div1div>
    <div id="div2" style="width:300px">div2div>
    <div id="div3" style="width:400px">div3div>

    <script src="jquery-1.12.4.js">script>
    <script>
    // 入口函数
    $(function () {
        // css方法: 设置/获取样式

        // 1.获取样式
        $('#getBtn').click(function () {
            // 1.1.获取id为 div1这个元素的 样式
            // console.log($('#div1').css('width'));;
            // console.log($('#div1').css('height'));;
            // console.log($('#div1').css('background-color'));;
            // console.log($('#div1').css('backgroundColor'));;
            // console.log($('#div1').css('border'));;
            // 在ie中, 要获取边框这样的样式值, 记得给一个 准确的 边框

            // 1.2 获取样式, 只能获取到 第1个
            // console.log($('div').css('width')); // 200px
        });

        /**
         * 2.设置样式: css(样式名, 样式值)
         * 设置的样式 是 行内样式
         */
        $('#setBtn').click(function () {
            // 2.1. 给 id为 div1的 这个元素 设置样式
            // 设置单样式
            // $('#div1').css('width', '300px');
            // $('#div1').css('height', 300);
            // $('#div1').css('backgroundColor', 'red');
            // $('#div1').css('border', '10px solid green');

            // 设置多样式, 给个对象
            // 对象中, 可以放 key-value
            // $('#div1').css({
            //     width: 300,
            //     'height': '300px',
            //     'background-color': 'green',
            //     // backgroundColor: gray,
            //     // 'border': '10px solid gray'
            //     'border-top-width': '10px'
            // });


            // 2.2给标签为div的 元素们 设置样式
            // 这里面, 也有 隐式遍历/隐式迭代;
            // 把 每个 div都社会中为同样的样式
            $('div').css({
                'width': '50px',
                'height': '50px',
                'background-color': 'green',
                'border': '10px solid black',
                'marginTop' : '10px'
            });
        });



    });
    script>
body>
html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85

在这里插入图片描述

相关阅读:
最近找到的几个不错的手机APP
【牛客算法-二分查找】刷题和面试兼顾还得看你啊
一道[CSCCTF 2019 Qual]FlaskLight的详解再遇SSTI
PMP项目管理证书是什么？有什么用？
微服务的灰度发布就该这样设计
像素、视口、网页计量单位与移动端适配方案
Redis持久化
简单个人网页设计作业静态HTML个人主题网页作业 DW个人网站模板下载大学生简单个人网页作品代码个人网页制作学生个人网页Dreamweaver设计作业
elasticsearch高级功能之跨集群复制CCR
WPF实现签名拍照功能

原文地址：https://blog.csdn.net/beyondx/article/details/126093513