jQuery-CSS属性查询与设置

傷城~ 2022-04-16 00:07 255阅读 0赞

# jQuery css() 方法 #

## jQuery css() 方法 ##

css() 方法设置或返回被选元素的一个或多个样式属性。

## 返回 CSS 属性 ##

如需返回指定的 CSS 属性的值，请使用如下语法：

css("propertyname");

下面的例子将返回首个匹配元素的 background-color 值：

<script>
    $(document).ready(function(){
      $("button").click(function(){
        alert("背景颜色 = " + $("p").css("background-color"));
      });
    });
    </script>
    </head>
    
    <body>
    <h2>这是一个标题</h2>
    <p style="background-color:#ff0000">这是一个段落。</p>
    <p style="background-color:#00ff00">这是一个段落。</p>
    <p style="background-color:#0000ff">这是一个段落。</p>
    <button>返回第一个 p 元素的 background-color </button>
    </body>

## 设置 CSS 属性 ##

如需设置指定的 CSS 属性，请使用如下语法：

css("propertyname","value");

下面的例子将为所有匹配元素设置 background-color 值：

<script>
    $(document).ready(function(){
      $("button").click(function(){
        $("p").css("background-color","yellow");
      });
    });
    </script>
    </head>
    
    <body>
    <h2>这是一个标题</h2>
    <p style="background-color:#ff0000">这是一个段落。</p>
    <p style="background-color:#00ff00">这是一个段落。</p>
    <p style="background-color:#0000ff">这是一个段落。</p>
    <p>这是一个段落。</p>
    <button>设置 p 元素的 background-color </button>
    </body>

## 设置多个 CSS 属性 ##

如需设置多个 CSS 属性，请使用如下语法：

css({"propertyname":"value","propertyname":"value",...});

下面的例子将为所有匹配元素设置 background-color 和 font-size：

<script>
    $(document).ready(function(){
      $("button").click(function(){
        $("p").css({"background-color":"yellow","font-size":"200%"});
      });
    });
    </script>
    </head>
    
    <body>
    <h2>这是一个标题</h2>
    <p style="background-color:#ff0000">这是一个段落。</p>
    <p style="background-color:#00ff00">这是一个段落。</p>
    <p style="background-color:#0000ff">这是一个段落。</p>
    <p>这是一个段落。</p>
    <button>为 p 元素设置多个样式</button>
    </body>

发表评论取消回复

表情：

评论列表（有 0 条评论，255人围观）

还没有评论，来说两句吧...

相关阅读

相关 js和jq设置disabled属性与移除disabled属性

js操作：代码如下: function disableElement(element,val){ document.getElementB

我会带着你远行/ 2023年01月01日 11:56/ 0 赞/ 424 阅读

相关 jQueryCSS3视角动画侧边栏菜单

[下载地址][Link 1] 创建jQueryCSS3视角动画侧边栏菜单。侧边栏菜单,单击时将当前窗口,倾斜的角度,揭示了菜单选项。　　它可以用作水平或垂直。 ![6\_2

以你之姓@/ 2022年09月14日 13:25/ 0 赞/ 258 阅读

相关 Fields属性查询

/// <summary> /// 根据Fields进行属性查询 /// </summary>

痛定思痛。/ 2022年08月07日 04:36/ 0 赞/ 165 阅读

相关设置Animation属性

转载自：http://blog.csdn.net/qq617119142/article/details/49510173 修改录制的动画，或，模型中的动画属性

偏执的太偏执、/ 2022年06月15日 00:09/ 0 赞/ 295 阅读

相关 ECharts属性设置

原文出处： [https://blog.csdn.net/she\_lover/article/details/51448967][https_blog.csdn.net_sh

￡神魔★判官ぃ/ 2022年05月20日 01:39/ 0 赞/ 227 阅读

相关 jQuery-HTML内容查询与设置

获得内容 - text()、html() 以及 val() 三个简单实用的用于 DOM 操作的 jQuery 方法： text() - 设置或返回所选元素的文本内

爱被打了一巴掌/ 2022年04月16日 00:09/ 0 赞/ 209 阅读

相关 jQuery-CSS属性查询与设置

jQuery css() 方法 jQuery css() 方法 css() 方法设置或返回被选元素的一个或多个样式属性。返回 CSS 属性如需返回指定的

傷城~/ 2022年04月16日 00:07/ 0 赞/ 256 阅读

相关 jQuery-HTML属性的查询与设置

获取属性 - attr() jQuery attr() 方法用于获取属性值。下面的例子演示如何获得链接中 href 属性的值： <script> $

不念不忘少年蓝@/ 2022年04月16日 00:06/ 0 赞/ 173 阅读

相关 Echarts 属性设置

theme = \{ // 全图默认背景 // backgroundColor: ‘rgba(0,0,0,0)’, // 默认色板 col

小咪咪/ 2021年09月17日 05:30/ 0 赞/ 390 阅读

相关 jQuery设置disabled属性与移除disabled属性

作用范围： `Readonly`只针对`input`和`textarea`有效，而`disabled`对于所有的表单元素都有效。表单中`readOnly`和`dis

客官°小女子只卖身不卖艺/ 2021年06月26日 16:06/ 0 赞/ 719 阅读