jquery css属性练习

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
  <title>css属性(专门用于class属性设置)</title>
  <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
  <style type="text/css">
        .c1{color:red;}
        .c2{font-size:50px;}
        .c3{width:100px;height:100px;border:1px solid red;}
  </style>
  <script  type="text/javascript" src="jquery-1.7.1.min.js"></script>
  <script type="text/javascript">
  /*
     addClass   //添加一个样式
     removeClass //移除一个样式
     toggleClass  //切换样式(如果有就移除,如果没有就添加)
     hasClass   //判断是否具有某个样式
  */
        window.onload=function(){
            $(‘#btnOk‘).click(function(){
                //添加c3样式
                //$(‘div‘).addClass(‘c3‘);

                //移除一个样式
                //$(‘div‘).removeClass(‘c1‘);

                //切换样式(如果有就移除,如果没有就添加)
                    //$(‘div‘).toggleClass(‘c3‘);

                      //判断是否具有某个样式
                    if($(‘div‘).hasClass(‘c1‘)){
                        alert(‘具有c1属性‘);
                    };
            });
        };
  </script>
 </head>
 <body>
   <div class=‘c1 c2 ‘>test</div>
    <hr />
 <input type="button" id=‘btnOk‘ value=‘确定‘  />
 </body>
</html>
时间: 2024-10-13 20:57:15

jquery css属性练习的相关文章

jQuery修改操作css属性实现方法

在jquery中我们要动态的修改css属性我们只要使用css()方法就可以实现了,下面我来给各位同学详细介绍介绍. css()方法在使用上具有多样性,我们先来了解css()方法基本知识. css() 方法设置或返回被选元素的一个或多个样式属性. 返回 CSS 属性如需返回指定的 CSS 属性的值,请使用如下语法: css("propertyname");下面的例子将返回首个匹配元素的 background-color 值: 实例 $("p").css("b

jQuery中的css属性对应名称

css中一些样式属性可以直接引用到jquery中,但是有些属性在jquery中与在css中有些区别,下面就是一些常用属性在css与jquery中的名称. jQuery中的css属性对应名称 css jQuery bottom bottom left left right right top top width width min-width minWidth max-width maxWidth height height min-height minHeight max-height maxH

jQuery的属性与样式之样式操作.css()

.css() 方法:获取元素样式属性的计算值或者设置元素的CSS属性 获取: .css( propertyName ) :获取匹配元素集合中的第一个元素的样式属性的计算值 .css( propertyNames ):传递一组数组,返回一个对象结果 设置:  .css(propertyName, value ):设置CSS .css( propertyName, function ):可以传入一个回调函数,返回取到对应的值进行处理 .css( properties ):可以传一个对象,同时设置多个

jQuery修改css属性

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

jquery学习 - jquery选择孩子元素和个数/获取css属性

选择器 选择孩子元素和css属性 获得孩子元素的个数 选择器 jquery的选择器很强大,可以的话,能用jquery的时候,真的是非常方便. 选择孩子元素和css属性 先看下面的代码: SelectColor = $(ColorId).children('svg').children('rect').css('fill'); 这个代码很容易懂.首先: ColorId = $("#id"); svg是一个子元素的标签. rect是svg下的子元素 fill是rect的一个css属性 可以

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

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

jQuery操作CSS属性的相关方法

1.前言 jQuery提供了以下几种操作DOM元素CSS样式的方法,包括直接访问.修改DOM元素的class属性值,还提供了访问.修改DOM元素内联CSS属性值的方法,除此之外还提供了大量直接访问.修改DOM元素大小和位置的方法. jQuery提供的操作CSS属性的相关方法如下. 1)        addClass(class):将指定的CSS定义添加到jQuery对象包含的所有DOM对象上. 2)        hasClass(class):判断该jQuery对象是否包含至少一个具有指定C

jquery动画控制非css属性

JQuery的animate()方法可以通过渐变的更改CSS属性来实现简单的动画效果, 比如 1 $("#box").animate({height:"300px"},3000); 可以控制id为box的标签在3秒内将高度更改到300px.那么如果想要控制非CSS属性呢,比如说针对一些WebGl中的动画控制,如果使用setInterval倒是可以实现效果,但是太过麻烦.这个时候就可以使用animate方法,生成递进的值,自己获取值来控制一些非CSS属性,比如: //

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

jQuery css() 方法 jQuery css() 方法 css() 方法设置或返回被选元素的一个或多个样式属性. 返回 CSS 属性 如需返回指定的 CSS 属性的值,请使用如下语法: css("propertyname"); 下面的例子将返回首个匹配元素的 background-color 值: 实例 $("p").css("background-color"); 设置 CSS 属性 如需设置指定的 CSS 属性,请使用如下语法: cs