JQuery--jQquery控制CSS样式

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <style>
 7         .main{
 8             width: 100px;
 9             height: 100px;
10             background-color: pink;
11         }
12     </style>
13     <script src="lib/jquery-1.12.2.js"></script>
14     <script>
15         $(function () {
16             /**
17              *  [JQ的CSS函数]
18              *  单属性修改(可以忽略)
19              *      .css(属性,值)
20              *  多属性修改(推荐)
21              *      .css({
22              *         属性:值
23              *      });
24              *      更是推荐
25              *      .css({
26              *         "属性":"值(单位)",  -- 代码通俗易懂
27              *      });
28              *  单属性获取
29              *   .css(属性)
30              * */
31              $(‘button:eq(0)‘).click(function () {
32                   $(‘.main‘).css({
33                       "width":"200px"
34                   });
35              });
36
37             $(‘button:eq(1)‘).click(function () {
38                 $(‘.main‘).css({
39                     "height":"200px"
40                 });
41             });
42
43             $(‘button:eq(2)‘).click(function () {
44                 $(‘.main‘).css({
45                     "background-color":"blue"
46                 });
47             });
48
49             $(‘button:eq(3)‘).click(function () {
50                 $(‘.main‘).css({
51                     "width":"300px",
52                     "height":"300px",
53                     "background-color":"#666"
54                 });
55             });
56
57             $(‘button:eq(4)‘).click(function () {
58                 alert($(‘.main‘).width()+"px");
59             });
60         });
61     </script>
62 </head>
63 <body>
64 <button>变宽</button>
65 <button>变高</button>
66 <button>变色</button>
67 <button>三变</button>
68 <button>获取宽度,并弹窗</button>
69 <div class="main">
70     文字行号
71 </div>
72 </body>
73 </html>
时间: 2024-10-16 12:57:08

JQuery--jQquery控制CSS样式的相关文章

jQuery控制CSS样式

<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>控制CSS样式</title> <style type="text/css

JS 控制CSS样式表

JS控制CSS样式,首先得确定一点,CSS与HTML页面的链接方式,因为CSS有3种与HTML页面结合的方式,不同的方式也会产生不同的结果. 下面先记录一下JS控制CSS所使用的方法. 1.使用javascript更改某个css class的属性... 1 <style type="text/css"> 2 .orig { 3 display: none; 4 } 5 </style> 你想要改变把他的display属性由none改为inline. 解决办法:

JQuery中操作css样式

//1.获取和设置样式  $("#tow").attr("class")获取ID为tow的class属性  $("#two").attr("class","divClass")设置Id为two的class属性.  //2.追加样式  $("#two").addClass("divClass2")为ID为two的对象追加样式divClass2  //3.移除样式  $(

jquery轻松操作CSS样式

$(this).click(function(){  if($(this).hasClass(“zxx_fri_on”)){    $(this).removeClass(“zxx_fri_on”);  }else{    $(this).addClass(“zxx_fri_on”);  }  return false;});   添加或去除元素集合的class name 1. 使用addClass()方法 addClass(names) 添加names指定的一个或多个class name给wr

jQuery基础 - 改变CSS样式

jQuery提供css()的方法来实现嵌入式改变元素样式,css()方法在使用上具有多样性.其中一种接受两个输入参数:样式属性和样式值,它们之间用逗号分开.比如我们要改变链接颜色,我们可以使用下面的代码: $("#61dh a").css('color','#123456'); //这里选择器‘$("#61dh a")’表示ID为‘#61dh’的元素下的所有链接. //.css(‘color’,'#123456');表示把颜色设为'#123456' 如果我们需要改变

jquery 控制css样式

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

jQuery动态改变css样式

jQuery提供的事件类方法 - hover().值得注意的是,hover()方法需要定义两个函数,一个是鼠标划过时:另一个是鼠标划过后.$("#61dh a").css('color','#123456'); $("#61dh a").hover(function(){ $(this).css('color','#999'); }, function(){ $(this).css('color','#123456'); }); 参考:http://www.cnbl

Vue.js 控制css样式

<script src="https://unpkg.com/vue/dist/vue.js"></script> <style type="text/css"> .blue{ background-color: blue; } .green{ background-color: green; } div{ width: 400px; height: 200px; border-bottom-width: 2px; } </

js css样式操作代码(批量操作)

js css样式操作代码(批量操作) 作者: 字体:[增加 减小] 类型:转载 时间:2009-10-09 用js控制css样式,能让网页达到良好的的用户体验甚至是动画的效果.并且考虑到效率. 我们用js书写css样式通常会用下面的两种方式: 一般情况下我们用js设置元素对象的样式会使用这样的形式: 复制代码 代码如下: var element= document.getElementById(”id”); element.style.width=”20px”; element.style.he