JQuery容易学习(8)——jQuery CSS 函数
日期：2014-05-17 浏览次数：20655 次
JQuery简单学习(8)——jQuery CSS 函数
?
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"
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
