每日一学—jQuery css()方法

简介: jQuery css()方法的学习

jQuery css() 方法

jQuery可以使用css()方法来修改简单元素样式;也可以操作类,修改多个样式

css() 方法设置或返回被选元素的一个或多个样式属性


①设置css属性

css()接收的参数是属性名和属性值,逗号分隔,是设置一组样式,属性必须加引号,值如果是数字可以不用跟单位和引号。请使用如下语法:

css("propertyname","value");

<htmllang="en"><head><scriptsrc="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script><title>Document</title></head><body><p>这是一个p标签</p></body><script>$('p').css("color", "red");
</script></html>

image.gif

以上代码设置一个p标签,用css()方法设置字体颜色为红色

image.gif


②设置多个css属性

css()方法的参数可以是对象形式,方便设置多组样式。样式名和样式值用冒号隔开,样式名可以不用加引号。请使用如下语法:

css({"propertyname":"value","propertyname":"value",...});

<htmllang="en"><head><scriptsrc="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script><title>Document</title></head><body><p>这是一个p标签</p></body><script>$('p').css({
color:'red',
border: '1px solid black',
fontStyle:'italic'  });
</script></html>

image.gif

给p标签设置样式为红色字体,实线边框1px,字体为斜体

image.gif


③获取样式/返回 CSS 属性

css()方法接收参数时只写样式名,则返回样式值。请使用如下语法:

css("propertyname");

<htmllang="en"><head><scriptsrc="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script><title>Document</title><style>p{
color: red;
    }
</style></head><body><p>这是一个p标签</p></body><script>vara=$('p').css("color");
console.log('返回的颜色是'+a);
</script></html>

image.gif

设置一个p标签,设置字体颜色为红色(red),获取p元素的color并在控制台中输出结果。

image.gif

❗注意返回颜色的值不是原本设置的red,而是该颜色的rgb模式的颜色值


涉及jQuery css()方法的例题

(多选题)14、jQuery中,通过jQuery对象.css( )可实现样式控制,以下说法正确的是(   AB     

A、 css( )方法会去除原有样式而设置新样式 

B、 正确语法:css(“属性”,”值”) 

C、 css( )方法不会去除原有样式 

D、 正确语法:css(“属性”) 

通过上面对于css()方法的学习后,我们可以很明确的排除CD这两个错误答案。

相关文章
|
7月前
|
JavaScript 前端开发
jQuery和CSS3超酷全屏视觉差幻灯片特效
jQuery和CSS3超酷全屏视觉差幻灯片特效
|
9月前
jQuery+CSS3实现404背景游戏动画源码
jQuery+CSS3实现404背景游戏动画源码
134 22
|
11月前
|
前端开发
css页面顶部底部固定,中间自适应几种方法
【10月更文挑战第22天】css页面顶部底部固定,中间自适应几种方法
|
10月前
|
JavaScript 前端开发
jQuery和CSS3滑动展开菜单按钮插件
这是一款jQuery和CSS3滑动展开菜单按钮插件。该滑动展开菜单按钮在用户点击主菜单按钮之后,子菜单以滑动的方式依次展开
140 21
|
10月前
|
JavaScript 容器
jquery和CSS3图片排序过滤搜索插件
Filterizr是一款jquery和CSS3图片排序过滤插件。它可以对一组图片进行排序,按条件过滤和按关键字搜索。并在显示结果时使用指定的CSS3动画过渡效果。
127 2
|
10月前
|
JavaScript
jquery和CSS3响应式轮播图插件jcSlider
jcSlider是一款jquery和CSS3响应式轮播图插件。jcSlider使用CSS3过渡动画,它可以和animate.css完美结合,生成60多种轮播图过渡动画效果。
|
10月前
|
JavaScript
jQuery和CSS3精美翻页式电子时钟特效
jQuery和CSS3精美翻页式电子时钟特效
|
10月前
|
JavaScript 前端开发
jQuery和CSS3斑马线样式range滑块特效
jQuery和CSS3斑马线样式range滑块特效
|
11月前
|
JavaScript
jQuery+css3制作精美的2024圣诞节倒计时页面
jQuery+css3制作精美的2024圣诞节倒计时页面动画
100 0
jQuery+css3制作精美的2024圣诞节倒计时页面
|
11月前
jQuery+CSS3模拟过山车动态的文字动画特效源码
jQuery+CSS3模拟过山车动态的文字动画特效源码实现在全黑的背景下,画面中的文本呈现过山车的轨迹动画上下滚动转圈,且伴随文本颜色渐变效果,非常有意思,欢迎对此特效感兴趣的朋友前来下载参考。
130 1

热门文章

最新文章

  • 1
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(六):全方面分析css的Flex布局,从纵、横两个坐标开始进行居中、两端等元素分布模式;刨析元素间隔、排序模式等
  • 2
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(五):背景属性;float浮动和position定位;详细分析相对、绝对、固定三种定位方式;使用浮动并清除浮动副作用
  • 3
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(八):学习transition过渡属性;本文学习property模拟、duration过渡时间指定、delay时间延迟 等多个参数
  • 4
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(一):CSS发展史;CSS样式表的引入;CSS选择器使用,附带案例介绍
  • 5
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(四):元素盒子模型;详细分析边框属性、盒子外边距
  • 6
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(二):CSS伪类:UI伪类、结构化伪类;通过伪类获得子元素的第n个元素;创建一个伪元素展示在页面中;获得最后一个元素;处理聚焦元素的样式
  • 7
    (CSS)使用Flex布局,帮助你快速了解各种基本的Flex布局属性以及帮你让元素快速达到布局中的指定位置!
  • 8
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(七):学习ransform属性;本文学习 rotate旋转、scale缩放、skew扭曲、tanslate移动、matrix矩阵 多个参数
  • 9
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(九):强势分析Animation动画各类参数;从播放时间、播放方式、播放次数、播放方向、播放状态等多个方面,完全了解CSS3 Animation
  • 10
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(三):元素继承关系、层叠样式规则、字体属性、文本属性;针对字体和文本作样式修改