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替身——jQuery.sub()；增强了遍历相邻节点的性能；jQuery开发团队构建系统的改进。 1.4重要新特性： ·常用方法的性能大幅提升：重写了大部分较早期的函数； ·更容易使用的设置函数（setter function）：为...
这一章先简单介绍jQuery及其用途，然后涉及如何下载和设置jQuery库，同时也会指导你使用jQuery编写第一个脚本。 第2章讲述如何通过jQuery中的选择符表达式及DOM遍历方法，在页面中的任何地方找到想要的元素。这一章...
——jQuery中文用户组 jQuery因为易于使用和功能强大著称，是所有Web开发者应该掌握的一种利器，初学者如何才能快速而有效地掌握jQuery呢？最好的方法莫过于一边学习理论，一边动手实践这些理论，本书就是按照这种...
凯撒加密解密程序 1个目标文件 1、程序结构化，用函数分别实现 2、对文件的加密，解密输出到文件 利用随机函数抽取幸运数字 简单 EJB的真实世界模型（源代码） 15个目标文件 摘要:Java源码,初学实例,基于EJB的真实...
本书全面探讨了 iphone平台的两种编程方式 ——web开发和 sdk编程。全书结合示例对这两种编程方式的基本流程、基本原理和基本原则给出了详细而通俗的讲解。在 web开发方面，分别介绍了三个 iphone web库，即 ...
8个目标文件 简单 JavaScript万年历 显示出当前时间及年份，还可以选择年份及月份和日期 Java编写的HTML浏览器 一个目标文件 摘要:Java源码,网络相关,浏览器 Java编写的HTML浏览器源代码，一个很简单甚至不算是...
jQuery与AngularJS39 苹果与橙子40 窥视未来41 14总结41 第2章构建与测试43 21介绍示例应用44 熟悉问题领域44 技术栈45 持久化存储46 MongoLab46 服务器端环境47 第三方JavaScript库48 BootstrapCSS48 ...