JQuery简单学习(8)——jQuery CSS 函数

JavaCrazyer

浏览: 3012189 次
性别:
来自: 河南

最近访客更多访客>>

beifengbei08

mnisummer

kristy_yy

qijojo

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

Web前端-JQuery专栏

jQuery CSS JavaScript HTML

jQuery CSS 操作

jQuery 拥有三种供 CSS 操作的重要函数：

$(selector).css(name,value)

$(selector).css({properties})

$(selector).css(name)

——————————————————————

CSS 操作实例

函数 css(name,value) 为所有匹配元素的给定 CSS 属性设置值：

实例

<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("button").click(function(){
    $("p").css("background-color","yellow");
  });
});
</script>
</head>

<body>
<h2>This is a heading</h2>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<button type="button">Click me</button>
</body>

</html>

函数 css({properties}) 同时为所有匹配元素的一系列 CSS 属性设置值：

实例

<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("button").click(function(){
    $("p").css({"background-color":"yellow","font-size":"200%"});
  });
});
</script>
</head>

<body>
<h2>This is a heading</h2>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<button type="button">Click me</button>
</body>

</html>

函数 css(name) 返回指定的 CSS 属性的值：

实例

<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("div").click(function(){
  $("#result").html($(this).css("background-color"));
  });
});
</script>
</head>

<body>
<div style="width:100px;height:100px;
background:#ff0000"></div>
<p id="result">Click in the box</p>
</body>
</html>

——————————————————————

jQuery Size 操作

jQuery 拥有两种供尺寸操作的重要函数：

$(selector).height(value)
$(selector).width(value)

——————————————————————

Size 操作实例

函数 height(value) 设置所有匹配元素的高度：

实例

<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("button").click(function(){
    $("#id100").height("200px");
  });
});
</script>
</head>

<body>
<div id="id100" style="background:yellow;height:100px;width:100px">
HELLO</div>
<div id="id200" style="background:yellow;height:100px;width:100px">
W3SCHOOL</div>
<button type="button">Click me</button>
</body>

</html>

函数 width(value) 设置所有匹配元素的宽度：

实例

<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("button").click(function(){
  $("#id200").width("300px");
  });
});
</script>
</head>

<body>
<div id="id100" style="background:yellow;height:100px;width:100px">HELLO</div>
<div id="id200" style="background:yellow;height:100px;width:100px">W3SCHOOL</div>
<button type="button">Click me</button>
</body>

</html>

——————————————————————

jQuery CSS 函数 - 来自本页

CSS 属性描述 $(selector).css(name,value) 为匹配元素设置样式属性的值 $(selector).css({properties}) 为匹配元素设置多个样式属性 $(selector).css(name) 获得第一个匹配元素的样式属性值 $(selector).height(value) 设置匹配元素的高度 $(selector).width(value) 设置匹配元素的宽度

分享到：

JQuery简单学习(9)——jQuery AJAX 函数 | JQuery简单学习(7)——jQuery HTML 操作

2010-12-27 11:05
浏览 1856
评论(0)
分类:Web前端
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论