Jquery使用css方法改变样式实例

本文实例讲述了Jquery使用css方法改变样式。分享给大家供大家参考。具体实现方法如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Jquery css方法</title>
<style type="text/css">
div{width:100px;margin:0px auto;border:1px solid red;}
</style>
<script src="jquery-1.6.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
  $("#btnChangeCss").click(function () {
    var $divs = $("div"); //返回JQuery对象，包含两个div元素
    //----举例1
    //alert("Div 的 Border样式:" + $divs.css("border-color"));
    //读取css样式
    //----举例2
    //$divs.css("backgroundColor", "#ccff66");
    //设置两个div元素的背景颜色
    //----举例3  链式设置三个个css属性
    $divs.css("width","500px").css("background-color", "#ffff00").css("font-size", "88px");
  });
});
</script>
</head>
<body>
<input id="btnChangeCss" type="button" value="改变样式" />
<div id="div1">我是div1</div>
<div id="div2">我是div2</div>
</body>
</html>

希望本文所述对大家的jQuery程序设计有所帮助。

赞 (0)

相关推荐

  • JQuery实现样式设置、追加、移除与切换的方法

    本文实例讲述了JQuery实现样式设置.追加.移除与切换的方法.分享给大家供大家参考.具体分析如下: 有了JQuery,元素的样式操作会变得相当简易.下面我们来看看如何使用JQuery来实现元素样式的获取.设置.追加.删除以及其它一些操作. 获取与设置样式 获取class和设置class都可以使用attr()方法来完成.例如使用attr()方法来获取p元素的class,JQuery代码如下: var p_class = $("p").attr("class"); /

  • jquery 操作css样式、位置、尺寸方法汇总

    一.CSS 1.css(name) 访问第一个匹配元素的样式属性. 返回值 String 参数 name (String) : 要访问的属性名称 示例: 复制代码 代码如下: $("p").css("color"); //取得第一个段落的color样式属性的值 2.css(properties) 把一个"名/值对"对象设置为所有匹配元素的样式属性.这是一种在所有匹配的元素上设置大量样式属性的最佳方式. 返回值 jQuery 参数 properti

  • jQuery获取样式中颜色值的方法

    本文实例讲述了jQuery获取样式中颜色值的方法.分享给大家供大家参考.具体分析如下: 今天使用jQuery获取样式中的background-color的值时发现在获取到的颜色值在IE中与Chrome.Firefox显示的格式不一样,IE中是以HEX格式显示[#ffff00],而Chrome.Firefox中则是以GRB格式显示[rgb(255,0,0)],由于需要将颜色值存储到数据库中,所以想让颜色值的格式统一下(其实不统一也是可以存的).搜索了一下,从国外的一个网站上得到一段代码: $.fn

  • jQuery使用addClass()方法给元素添加多个class样式

    本文实例讲述了jQuery使用addClass()方法给元素添加多个class样式的方法.分享给大家供大家参考.具体如下: jQuery通过addClass()方法给元素添加多个class,只需要在添加的class中用空格分开多个class既可 <!DOCTYPE html> <html> <head> <script src="js/jquery.min.js"> </script> <script> $(doc

  • jQuery实现鼠标划过修改样式的方法

    本文实例讲述了jQuery实现鼠标划过修改样式的方法.分享给大家供大家参考.具体如下: $(document).ready(function () { //默认情况下样式 $("input:text").attr("style","border:1px solid #7E9DB9;"); //鼠标移入样式 $("input:text").mouseover(function () { $(this).attr("st

  • jQuery给多个不同元素添加class样式的方法

    本文实例讲述了jQuery给多个不同元素添加class样式的方法.分享给大家供大家参考.具体分析如下: jQuery可以通过addClass()方法给多个不同的html元素同时添加相同的class <!DOCTYPE html> <html> <head> <script src="js/jquery.min.js"> </script> <script> $(document).ready(function(){

  • jQuery使用toggleClass方法动态添加删除Class样式的方法

    本文实例讲述了jQuery使用toggleClass方法动态添加删除Class样式的方法.分享给大家供大家参考.具体分析如下: jQuery通过toggleClass方法动态添加删除Class,一次执行相当于addClass,再次执行相当于removeClass,运行下面的代码点击按钮可以看到文本段落字体在蓝色和黑色间切换 <!DOCTYPE html> <html> <head> <script src="js/jquery.min.js"&

  • jQuery使用CSS()方法给指定元素同时设置多个样式

    本文实例讲述了jQuery使用CSS()方法给指定元素同时设置多个样式的方法.分享给大家供大家参考.具体如下: <!DOCTYPE html> <html> <head> <script src="js/jquery.min.js"> </script> <script> $(document).ready(function(){ $("button").click(function(){ $(

  • JQuery操作元素的css样式

    我们常常要使用Javascript来改变页面元素的样式.其中一种办法是改变页面元 素的CSS类(Class),这在传统的Javascript里,我们通常是通过处理HTML Dom的classname特性来实现的:而jQuery里提供三种方法来实现这个功能, 虽然它们和传统方法的思想相通,但是却节省了许多代码.还是那句 话 – "jQuery让JavaScript代码变得简洁!" 1. addClass() – 添加CSS类 复制代码 代码如下: $("#target"

  • Jquery使用css方法改变样式实例

    本文实例讲述了Jquery使用css方法改变样式.分享给大家供大家参考.具体实现方法如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> &

  • jQuery的css()方法用法实例

    本文实例讲述了jQuery的css()方法用法.分享给大家供大家参考.具体分析如下: 此方法返回或设置匹配元素的一个或多个样式属性. 语法结构: 语法一: 取得指定样式属性的属性值. 以样式属性名称作为参数.例如: 复制代码 代码如下: $("div").css("color") 以上代码能够获取div的字体颜色值. 代码实例: 复制代码 代码如下: <!DOCTYPE html> <html> <head> <meta c

  • jQuery HTML css()方法与css类实例详解

    本文实例讲述了jQuery HTML css()方法与css类.分享给大家供大家参考,具体如下: jQuery css() 方法 返回 CSS 属性 如需返回指定的 CSS 属性的值,请使用如下语法: css("propertyname"); 下面的例子将返回首个匹配元素的 background-color 值: $("p").css("background-color");//只获取 了一个背景颜色 //获取多个 <body> &l

  • JQuery结合CSS操作打印样式的方法

    本节内容:JQuery.CSS操作打印样式. 一.添加打印样式 1,为屏幕显示和打印分别准备一个css文件,如下所示:  用于屏幕显示的css: 复制代码 代码如下: <link rel="stylesheet" href="css/mainstylesheet.css" media="screen" /> 用于打印的css: 复制代码 代码如下: <link rel="stylesheet" href=&q

  • JavaScript使用链式方法封装jQuery中CSS()方法示例

    本文实例讲述了JavaScript使用链式方法封装jQuery中CSS()方法.分享给大家供大家参考,具体如下: 主要思路就是:返回this对象,将所获取的操作元素放入一个数组中.在原型中添加拓展方法 <html> <head> <title></title> </head> <body> <div id="one">aa</div> </body> <script typ

  • jQuery的css() 方法使用指南

    定义和用法 css() 方法返回或设置匹配的元素的一个或多个样式属性. 返回 CSS 属性值 返回第一个匹配元素的 CSS 属性值. 注释:当用于返回一个值时,不支持简写的 CSS 属性(比如 "background" 和 "border"). 复制代码 代码如下: $(selector).css(name) name 必需.规定 CSS 属性的名称.该参数可包含任何 CSS 属性.比如 "color". 实例 取得第一个段落的 color 样式

  • JavaScript原生xmlHttp与jquery的ajax方法json数据格式实例

    javascript版本的ajax发送请求 (1).创建XMLHttpRequest对象,这个对象就是ajax请求的核心,是ajax请求和响应的信息载体,单是不同浏览器创建方式不同 (2).请求路径 (3).使用open方法绑定发送请求 (4).使用send() 方法发送请求 (5).获取服务器返回的字符串   xmlhttpRequest.responseText; (6).获取服务端返回的值,以xml对象的形式存储  xmlhttpRequest.responseXML; (7).使用W3C

  • jQuery使用post方法提交数据实例

    本文实例讲述了jQuery使用post方法提交数据的用法.分享给大家供大家参考.具体实现方法如下: <!DOCTYPE html> <html> <head> <script src="js/jquery.min.js"> </script> <script> $(document).ready(function(){ $("button").click(function(){ $.post(&

  • jquery中one()方法的用法实例

    本文实例讲述了jquery中one()方法的用法.分享给大家供大家参考.具体分析如下: jQuery中的one()方法:表示只执行一次,代码如下: 复制代码 代码如下: <html> <head> <title>jquery事件:one()方法的使用</title> <script type="text/javascript" src="jquery-1.8.2.min.js"></script>

随机推荐