jQuery的CSS操作

.css()——获取匹配元素集合中的第一个元素的样式属性的值设置每个匹配元素的一个或多个CSS属性;

.hasClass()——确定任何一个匹配元素是否有被分配给定的(样式)类;

.addClass()——为每个匹配的元素添加指定的样式类名;

.removeClass()——移除集合中每个匹配元素上一个,多个或全部样式;

.toggleClass()——在匹配的元素集合中的每个元素上添加或删除一个或多个样式类,取决于这个样式类是否存在或值切换属性。即:如果存在(不存在)就删除(添加)一个类。

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>添加元素&删除元素</title>
    <script src="js/jquery-1.11.2.min.js"></script>
    <script src="js/css.js"></script>
    <style>
        .divStyle{
            width:800px;
            height: 25px;
            background-color: #1abc9c;
        }
    </style>
</head>
<body>
<div id="div1">
    获取匹配元素集合中的第一个元素的样式属性的值或设置每个匹配元素的一个或多个CSS属性。
</div>

</body>
</html>
$(document).ready(function(){
    //$("#div1").css({
    //    width:"700px",height:"25px",backgroundColor:"#01C5FF"
    //});
    //$("#div1").addClass("divStyle");
    //$("#div1").removeClass("divStyle");
    $("#div1").click(function(){
        $(this).toggleClass("divStyle");
    })
})

版权声明:本文为博主原创文章,未经博主允许不得转载。

时间: 2024-08-17 21:59:14

jQuery的CSS操作的相关文章

JQuery 之CSS操作

JQuery 之CSS操作 设置 <p> 元素的颜色: 将所有段落的颜色设为红色 $(".btn1").click(function(){ $("p").css("color","red"); }); 设置多个 CSS 属性/值对 $(selector).css({property:value, property:value, ...}) 把"名/值对"对象设置为所有匹配元素的样式属性. 这是一

jquery对css操作

1.css取得p的颜色:$(document).ready(function(){ var p= $("p").css("color"); alert(p);});设置段落字体的颜色为红色:$(document).ready(function(){ $("p").css("color","red");});设置段落字体的颜色为红色并且背景色为蓝色:$(document).ready(function(){

&lt;jQuery&gt; 八. CSS操作

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <ul> <li>RayLee</li> <li>ZeroHour</li> <li>AtongKu&l

Jquery CSS 操作 - height() 方法

一.height() 方法 height() 方法返回或设置匹配元素的高度 $(".btn1").click(function(){ $("p").height(50); }); height方法事例 Jquery CSS 操作 - height() 方法,码迷,mamicode.com

jQuery CSS 操作

jQuery CSS 操作 jQuery 拥有三种用于 CSS 操作的重要函数: $(selector).css(name,value) $(selector).css({properties}) $(selector).css(name) CSS 操作实例 函数 css(name,value) 为所有匹配元素的给定 CSS 属性设置值: 实例 $(selector).css(name,value) $("p").css("background-color",&qu

jQuery获取和操作元素的属性和CSS样式

本文学习如何使用jQuery获取和操作元素的属性和CSS样式. 元素属性和Dom属性 对于下面这样一个标签元素: <img id='img' src="1.jpg" alt='1' class="imgs"></img>  我们通常将id,src,alt,class称为属性,也即元素属性.但是,当浏览器对标签元素进行解析时,会将元素解析为Dom对象,相应的,元素属性也就解析为Dom属性. 元素属性和Dom属性只是在我们对其进行不同解析时的不同

JQuery文档操作方法跟JQuery属性操作方法跟JQuery CSS操作函数

JQuery文档操作方法 这些方法对于 XML 文档和 HTML 文档均是适用的,除了:html(). 方法                            描述 addClass()                    向匹配的元素添加指定的类名. after()                           在匹配的元素之后插入内容. append()                       向匹配的元素内部追加内容. appendTo()                 

jQuery CSS操作及jQuery的盒子模型

jQuery CSS-jQuery CSS方法 jQuery CSS-jQuery盒子模型

jquery 学习(五) - CSS 操作

HTML + CSS 样式 /*CSS样式*/<style> body{ margin: 0; } div{ width: 100%; height: 2000px; background-color: aquamarine; margin: 0; } .a1{ position: fixed; right: 20px; bottom: 20px; width: 90px; height: 30px; background-color: darkgoldenrod; color: white;