美文网首页jQuery葵花宝典程序员
jQuery设置或返回元素样式属性。

jQuery设置或返回元素样式属性。

作者: 明明德撩码 | 来源:发表于2017-12-29 22:45 被阅读6次

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

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

css("propertyname");

设置 CSS 属性

语法

css("propertyname","value");

例子将为所有匹配元素设置 background-color 值:

$("p").css("background-color","yellow");

设置多个 CSS 属性

语法

css({"propertyname":"value","propertyname":"value",...});
map集合形式,键值对的方式进行设置,以逗号隔开。

例子将为所有匹配元素设置 background-color 和 font-size:

实例

$("p").css({"background-color":"yellow","font-size":"200%"});

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js">
</script>
<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>
</html>

运行前

image.png

运行后

image.png

相关文章

  • jQuery设置或返回元素样式属性。

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

  • 笔试题整理(二)

    京东: 1、jQuery属性操作方法val():设置或返回匹配元素的值。html():设置或返回匹配的元素集合中的...

  • 获取和设置元素的属性

    css() 为被选元素设置或返回一个或多个样式属性。 当用于返回属性,返回第一个匹配元素的指定 CSS 属性值。 ...

  • 3 - jQuery HTML

    jQuery 拥有可操作 HTML 元素和属性的强大方法。 一、获得值 1、text() 设置或返回所选元素的文...

  • jQuery-样式相关操作

    jQuery-样式相关操作 css(name|pro|[,val|fn]用于设置或获取元素CSS样式 jQuery...

  • jQuery基本操作

    jQuery操作DOM元素 使用attr()方法控制元素的属性 attr()方法的作用是设置或者返回元素的属性,其...

  • 第5节: 设置和获取元素的样式

    知识讲解: 除设置和获取DOM元素外,jQuery还十分方便地可以设置或获取元素的样式属性值,代码如下列所示: o...

  • 从零玩转jQuery-CSS操作

    jQuery操作CSS样式 css(name|pro|[,val|fn])方法用于设置或获取元素CSS样式格式1:...

  • js 之jquery中判断checkbox是否被选中的方法

    js中 jQuery中 attr()方法 设置或者返回备选元素的值 prop方法 还有removeAttr(属性...

  • JQUERY学习整理(一)

    jquery有何作用? jquery主要有7大作用html元素的选取、DOM操作、修改属性、设置样式、绑定html...

网友评论

    本文标题:jQuery设置或返回元素样式属性。

    本文链接:https://www.haomeiwen.com/subject/qwwwgxtx.html