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

最新推荐文章于 2024-09-25 09:15:00 发布

iteye_9300

最新推荐文章于 2024-09-25 09:15:00 发布

阅读量117

点赞数

分类专栏： Web前端-JQuery专栏文章标签： jQuery CSS JavaScript HTML ViewUI

Web前端-JQuery专栏专栏收录该内容

9 篇文章 0 订阅

订阅专栏

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) 设置匹配元素的宽度