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

在这里插入图片描述

相关阅读:
每日一题:241. 为运算表达式设计优先级
Day12--自定义组件-渲染my-search组件的基本结构
数字化转型有哪些关键步骤？
CDN加速在目前网络安全里的重要性
【ARM AMBA5 CHI 入门 12.1 -- CHI 链路层详细介绍】
聚观早报 | vivo Y100官宣；极氪001 FR将上市
冒泡排序、选择排序、插入排序、希尔排序
搭建django后端api，前后端分离，可跨域，带管理员后台和商品模型(耗时10分钟)
读书笔记-《ON JAVA 中文版》-摘要9[第九章多态]
关于网站建设公司哪家好的一些事

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