这篇文章给大家分享的是有关jQuery如何对CSS元素进行操作的内容。小编觉得挺实用的，因此分享给大家做个参考，一起跟随小编过来看看吧。

jQuery 操作 CSS
通过 jQuery，可以很容易地对 CSS 元素进行操作。jQuery 拥有若干进行 CSS 操作的方法：
addClass() - 向被选元素添加一个或多个类
removeClass() - 从被选元素删除一个或多个类
toggleClass() - 对被选元素进行添加/删除类的切换操作
css() - 设置或返回样式属性

jQuery addClass() 方法
下例展示如何向不同的元素添加 class 属性。当然，在添加类时，您也可以选取多个元素：

<!DOCTYPEhtml><html><head><scriptsrc="../jquery/jquery-1.11.1.min.js"></script><script>$(document).ready(function(){$("button").click(function(){$("h2,h3,p").addClass("blue");$("div").addClass("important");});});</script><styletype="text/css">.important{font-weight:bold;font-size:xx-large;}.blue{color:blue;}</style></head><body><h2>标题1</h2><h3>标题2</h3><p>这是一个段落。</p><p>这是另一个段落。</p><div>这是非常重要的文本！</div><br><button>向元素添加类</button></body></html>同时，您也可以在addClass()方法中规定多个类：$("button").click(function(){$("#div").addClass("importantblue");});


jQuery removeClass() 方法
下面的例子演示如何不同的元素中删除指定的 class 属性：

<!DOCTYPEhtml><html><head><scriptsrc="../jquery/jquery-1.11.1.min.js"></script><script>$(document).ready(function(){$("button").click(function(){$("h2,h3,p").removeClass("blue");});});</script><styletype="text/css">.important{font-weight:bold;font-size:xx-large;}.blue{color:blue;}</style></head><body><h2class="blue">标题1</h2><h3class="blue">标题2</h3><pclass="blue">这是一个段落。</p><p>这是另一个段落。</p><br><button>从元素上删除类</button></body></html>


jQuery toggleClass() 方法
jQuery toggleClass() 方法，对被选元素进行添加/删除类的切换操作：

<!DOCTYPEhtml><html><head><scriptsrc="../jquery/jquery-1.11.1.min.js"></script><script>$(document).ready(function(){$("button").click(function(){$("h2,h3,p").toggleClass("blue");});});</script><styletype="text/css">.blue{color:blue;}</style></head><body><h2>标题1</h2><h3>标题2</h3><p>这是一个段落。</p><p>这是另一个段落。</p><button>切换CSS类</button></body></html>


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

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

css("propertyname");

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

<!DOCTYPEhtml><html><head><scriptsrc="../jquery/jquery-1.11.1.min.js"></script><script>$(document).ready(function(){$("button").click(function(){alert("Backgroundcolor="+$("p").css("background-color"));});});</script></head><body><h3>这是标题</h3><pstyle="background-color:#ff0000">这是一个段落。</p><pstyle="background-color:#00ff00">这是一个段落。</p><pstyle="background-color:#0000ff">这是一个段落。</p><button>返回p元素的背景色</button></body></html>


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

css("propertyname","value");

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

<!DOCTYPEhtml><html><head><scriptsrc="../jquery/jquery-1.11.1.min.js"></script><script>$(document).ready(function(){$("button").click(function(){$("p").css("background-color","yellow");});});</script></head><body><h3>这是标题</h3><pstyle="background-color:#ff0000">这是一个段落。</p><pstyle="background-color:#00ff00">这是一个段落。</p><pstyle="background-color:#0000ff">这是一个段落。</p><p>这是一个段落。</p><button>设置p元素的背景色</button></body></html>


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

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

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

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

感谢各位的阅读！关于“jQuery如何对CSS元素进行操作”这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，让大家可以学到更多知识，如果觉得文章不错，可以把它分享出去让更多的人看到吧！