码迷，mamicode.com
首页 > Web开发 > 详细

jQuery CSS操作

时间：2016-07-17 16:11:58      阅读：212      评论：0      收藏：0      [点我收藏+]

标签：

1、css() 设置或返回匹配元素的样式属性

（1）、返回 CSS 属性值

   返回第一个匹配元素的 CSS 属性值。注释：当用于返回一个值时，不支持简写的 CSS 属性（比如 "background" 和 "border"）。

      语法：$(selector).css(name)

   name必需。规定 CSS 属性的名称。该参数可包含任何 CSS 属性。比如 "color"。

实例：取得第一个段落的 color 样式属性的值

<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("button").click(function(){
    alert($("p").css("color"));
  });
});
</script>
</head>
<body>
<p style="color:red">This is a paragraph.</p>
<button type="button">返回段落的颜色</button>
</body>
</html>


（2）、设置 CSS 属性

   设置所有匹配元素的指定 CSS 属性。

        语法：$(selector).css(name,value)

   name必需。规定 CSS 属性的名称。该参数可包含任何 CSS 属性，比如 "color"。

   value可选。规定 CSS 属性的值。该参数可包含任何 CSS 属性值，比如 "red"。如果设置了空字符串值，则从元素中删除指定属性。

<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("button").click(function(){
    $("p").css("color","red");
  });
});
</script>
</head>
<body>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<button type="button">改变段落的颜色</button>
</body>
</html>

技术分享


（3）、使用函数来设置 CSS 属性

   设置所有匹配的元素中样式属性的值。此函数返回要设置的属性值。接受两个参数，index 为元素在对象集合中的索引位置，value 是原先的属性值。

      语法：$(selector).css(name,function(index,value))

    name必需。规定 CSS 属性的名称。该参数可包含任何 CSS 属性，比如 "color"。

    function(index,value) 规定返回 CSS 属性新值的函数。

    index - 可选。接受选择器的 index 位置

    oldvalue - 可选。接受 CSS 属性的当前值。

<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("div").click(function() {
    $(this).css(
      "width", function(index, value) {return parseFloat(value) *3;}
    );
  });
});
</script>
<style>
div {width:100px; height:50px; background-color:red;}
</style>
</head>
<body>
<div>请点击这里</div>
</body>
</html>

技术分享

（4）、设置多个 CSS 属性/值对

      语法：$(selector).css({property:value, property:value, ...})

  把“名/值对”对象设置为所有匹配元素的样式属性。这是一种在所有匹配的元素上设置大量样式属性的最佳方式。

  {property:value} 必需。规定要设置为样式属性的“名称/值对”对象。该参数可包含若干对 CSS 属性名称/值。比如 {"color":"red","font-weight":"bold"}

<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("button").click(function(){
    $("p").css({
      "color":"white",
      "background-color":"#98bf21",
      "font-family":"Arial",
      "font-size":"20px",
      "padding":"5px",
      "width":"300px"
    });
  });
});
</script>
</head>
<body>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<button type="button">改变段落的样式</button>
</body>
</html>
技术分享

2、offset()返回第一个匹配元素相对于文档的位置

   offset() 方法返回或设置匹配元素相对于文档的偏移（位置）。

（1）、返回偏移坐标

   返回第一个匹配元素的偏移坐标。该方法返回的对象包含两个整型属性：top 和 left，以像素计。此方法只对可见元素有效。

<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("button").click(function(){
    x=$("p").offset();
    $("#span1").text(x.left);
    $("#span2").text(x.top);
  });
});
</script>
</head>
<body>
<p>本段落的偏移是 <span id="span1">unknown</span> left 和 <span id="span2">unknown</span> top。</p>
<button>获得 offset</button>
</body>
</html>
技术分享

（2）、设置偏移坐标

  设置所有匹配元素的偏移坐标。

      语法：$(selector).offset(value)

  value必需。规定以像素计的 top 和 left 坐标。可能的值：值对，比如 {top:100,left:0}、带有 top 和 left 属性的对象

<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("button").click(function(){
    $("p").offset({top:100,left:10});
  });
});
</script>
</head>
<body>
<p>This is a paragraph.</p>
<button>设置新的偏移</button>
</body>
</html>

技术分享

（3）、使用函数来设置偏移坐标

   使用函数来设置所有匹配元素的偏移坐标。

       语法：$(selector).offset(function(index,oldoffset))

   function(index,oldoffset) 规定返回被选元素新偏移坐标的函数。

   index - 可选。接受选择器的 index 位置

   oldvalue - 可选。接受选择器的当前坐标。

<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("button").click(function(){
    $("p").offset(function(n,c){
    	newPos=new Object();
        newPos.left=c.left+100;
        newPos.top=c.top+100;
        return newPos;
    });
  });
});
</script>
</head>
<body>
<p>这是一个段落。</p>
<button>设置 p 元素的 offset 坐标</button>
</body>
</html>
技术分享

3、position()返回第一个匹配元素相对于父元素的位置

   position() 方法返回匹配元素相对于父元素的位置（偏移）。该方法返回的对象包含两个整型属性：top 和 left，以像素计。此方法只对可见元素有效。

      语法：$(selector).position()

<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("button").click(function(){
    x=$("p").position();
    alert("Left position: " + x.left + " Top position: " + x.top);
  });
});
</script>
</head>
<body>
<p>This is a paragraph.</p>
<button>获得 p 元素的位置坐标</button>
</body>
</html>

4、width() 设置或返回匹配元素的宽度

（1）返回宽度

   返回第一个匹配元素的宽度。如果不为该方法设置参数，则返回以像素计的匹配元素的宽度。

          语法：$(selector).width()

<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $(".btn1").click(function(){
    $("span").text($("p").width());
  });
});
</script>
</head>
<body>
<p>本段落的宽度是 <span>unknown</span> px。</p>
<button class="btn1">获得宽度</button>
</body>
</html>

技术分享

（2）、设置宽度

   设置所有匹配元素的宽度。

        语法：$(selector).width(length)

   length可选。规定元素的宽度。如果没有规定长度单位，则使用默认的 px 单位。

<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $(".btn1").click(function(){
    $("p").width(200);
  });
});
</script>
</head>
<body>
<p style="background-color:yellow">This is a paragraph.</p>
<button class="btn1">改变宽度</button>
</body>
</html>

技术分享

 

（3）、使用函数来设置宽度

   使用函数来设置所有匹配元素的宽度。

       语法：$(selector).width(function(index,oldwidth))

   function(index,oldwidth) 规定返回被选元素新宽度的函数。

   index - 可选。接受选择器的 index 位置

   oldvalue - 可选。接受选择器的当前值。

<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("button").click(function(){
    $("p").width(function(n,c){
    return c-50;
    });
  });
});
</script>
</head>
<body>
<p style="background-color:yellow">这是一个段落。</p>
<button>以 50 像素的幅度减少 p 元素的宽度</button>
</body>
</html>
技术分享

5、height() 设置或返回匹配元素的高度

（1）、返回高度

   返回第一个匹配元素的高度。如果不为该方法设置参数，则返回以像素计的匹配元素的高度。

       语法：$(selector).height()

<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $(".btn1").click(function(){
    $("span").text($("p").height());
  });
});
</script>
</head>
<body>
<p>本段落的高度是 <span>unknown</span> px。</p>
<button class="btn1">获得高度</button>
</body>
</html>

技术分享

（2）、设置高度

   设置所有匹配元素的高度。

       语法：$(selector).height(length)

   length可选。规定元素的高度。如果没有规定长度单位，则使用默认的 px 单位。

<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $(".btn1").click(function(){
    $("p").height(50);
  });
});
</script>
</head>
<body>
<p style="background-color:yellow">This is a paragraph.</p>
<button class="btn1">改变高度</button>
</body>
</html>

技术分享

 

（3）、使用函数来设置高度

   使用函数来设置所有匹配元素的高度。

       语法：$(selector).height(function(index,oldheight))

   function(index,oldheight) 规定返回被选元素新高度的函数。

   index - 可选。接受选择器的 index 位置

   oldvalue - 可选。接受选择器的当前值。

<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("button").click(function(){
    $("p").height(function(n,c){
    return c+10;
    });
  });
});
</script>
</head>
<body>
<p style="background-color:yellow">这是一个段落.</p>
<button>以 10 像素的幅度增加 p 元素的高度</button>
</body>
</html>

技术分享

 

 

jQuery CSS操作

标签：

原文地址：http://blog.csdn.net/qq_27626333/article/details/51927461
踩
(0)
赞
(0)
   
举报
评论 一句话评论（0）
登录后才能评论！
分享档案
更多>
2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)
周排行
mamicode.com排行更多图片
更多
友情链接
兰亭集智   国之画   百度统计   站长统计   阿里云   chrome插件   新版天听网
关于我们 - 联系我们 - 留言反馈
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码！