jQuery操作页面元素之css style操作
2021-04-18 11:26
标签：ast function move har meta 指定 idt 格式化 层叠样 一： 在HTML文件中，CSS（Cascading Style Sheet，层叠样式表）用于格式化元素。jQuery提供了用于操作CSS的方法。 1：css()方法: css()方法可获取或设置CSS样式。 2:CSS类操作方法 jQuery提供了直接操作元素class属性的方法。 • addClass()：添加类。 • removeClass()：删除类。 • toggleClass()：切换类。若元素无指定类，则为其添加该类；若有指定类，则将其删除。 jQuery操作页面元素之css style操作 标签：ast function move har meta 指定 idt 格式化 层叠样 原文地址：https://www.cnblogs.com/1314bjwg/p/12283784.html 1 DOCTYPE html>
2 html>
3
4 head>
5 meta charset="utf-8">
6 title>css样式操作title>
7 script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.2.1.min.js">
8 script>
9 style type="text/css">
10 .b {
11 border: 1px solid red;
12 padding: 5px;
13 }
14
15 .c {
16 background-color: turquoise;
17 }
18
19 .bc {
20 background-color: red;
21 }
22 style>
23 head>
24 script>
25 $(function() {
26 /*
27 $(‘div:lt‘):选中div标签的下标不大于2的div。:lt(index)基本筛选器
28 */
29 $(‘#btn1‘).click(function() {
30 $(‘div:lt(2)‘).css({
31 padding: ‘6px‘,
32 margin: ‘5px‘
33 })
34 })
35 $(‘#btn2‘).click(function() {
36 $(‘#out‘).text($(‘div‘).css(‘borderTopWidth‘)) //获取样式
37 })
38 $(‘#btn3‘).click(function() {
39 //添加css样式(添加css类)
40 $(‘span‘).addClass(‘b c‘)
41 })
42 $(‘#btn4‘).click(function() {
43 /*
44 removeClass删除类
45 $(‘span:last‘):last表示绑定匹配到的最后一个span
46 $(‘span:first‘)
47 */
48 $(‘span:last‘).removeClass(‘c‘)
49 })
50 $(‘#btn5‘).click(function() {
51 //toggleClass切换类.
52 $(‘span‘).toggleClass(‘bc‘)
53 })
54 })
55 script>
56
57 body>
58 div>文本1div>br>
59 div>文本2div>br>
60 span id="s1">span文本1span>
61 span id="s2">span文本2span>br>
62 button id="btn1">设置样式button>br>
63 button id="btn2">查看样式button>br>
64 button id="btn3">添加样式button>br>
65 button id="btn4">删除样式button>br>
66 button id="btn5">切换样式button>br>
67 div id="out">div>
68 body>
69
70 html>
下一篇：HTML----表单标签
文章标题：jQuery操作页面元素之css style操作
文章链接：http://soscw.com/index.php/essay/76259.html