`

jQuery css类

js 
阅读更多

$(selecor).css(name)

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

设置<p>元素的颜色:

$(".button").click(function(){
  $("p").css("color","red");
});

 使用函数来设置css属性

$(selector).css(name,function(index,value))
//此函数返回要设置的属性值。接受两个参数,index 为元素在对象集合中的索引位置,value 是原先的属性值。

 例如将所有段落的颜色设为黄色

$("button").click(function(){
    $("p").css("color",function(){return "yellow";});
    });

 逐渐增加div的宽度

$("div").click(function() {
  $(this).css(
    "width", function(index, value) {return parseFloat(value) * 1.2;}
  );
});

 设置多个css属性

$(selector).css({property:value, property:value, ...})

 例如

$("button").click(function(){
    $("p").css({
      "color":"white",
      "background-color":"#98bf21",
      "font-family":"Arial",
      "font-size":"20px",
      "padding":"5px"
    });
  });
});

 

 jQuery width(),height()

 

 width() 方法设置或返回元素的宽度(不包括内边距、边框或外边距)。

 

height() 方法设置或返回元素的高度(不包括内边距、边框或外边距)。
$("button").click(function(){
  var txt="";
  txt+="Width: " + $("#div1").width() + "</br>";
  txt+="Height: " + $("#div1").height();
  $("#div1").html(txt);
});
//返回<div>的高度宽度
 jQuery innerWidth(),innerHeight()方法
innerWidth()返回元素的宽度(包括内边距)
innerHidth()返回元素的高度(包括内边距)
$("button").click(function(){
    var txt="";
    txt+="Width of div: " + $("#div1").width() + "</br>";
    txt+="Height of div: " + $("#div1").height() + "</br>";
    txt+="Inner width of div: " + $("#div1").innerWidth() + "</br>";
    txt+="Inner height of div: " + $("#div1").innerHeight();
    $("#div1").html(txt);                                                                 

分享到:
评论

相关推荐

    jQuery css分类列表多选框勾选效果

    "jQuery css分类列表多选框勾选效果"是一种实现这种交互性的方式,它使得用户在选择多个选项时能够得到直观、美观的反馈。这个项目的核心是结合了jQuery的动态功能和CSS3的样式增强,为传统的HTML复选框提供了更现代...

    jquery css

    jquery css

    jquery css3实现瀑布流照片墙特效.rar

    jquery css3实现瀑布流照片墙特效.rar jquery css3实现瀑布流照片墙特效.rar jquery css3实现瀑布流照片墙特效.rar jquery css3实现瀑布流照片墙特效.rar jquery css3实现瀑布流照片墙特效.rar jquery css3实现瀑布...

    jQuery Mobile CSS 类

    jQuery Mobile CSS 类 jQuery CSS 类 jQuery Mobile CSS 类来设置不同元素的样式。 以下列表包含了通用的 CSS 样式: 全局类 以下类可以在 jQuery Mobile 小工具中使用 (按钮,工具条,面板,表格,列表等。): ...

    jquery css3进度条加载动画特效

    标题中的“jQuery CSS3进度条加载动画特效”指的是利用JavaScript库jQuery和CSS3技术来创建一种视觉效果,即在网页内容加载时显示的进度条。这种特效可以提供用户反馈,表明页面正在加载,并且增加了用户体验的互动...

    jquery css3曲线特效图.zip

    【jQuery CSS3曲线特效图】是一种利用jQuery库和CSS3技术构建的动态、交互式的曲线图形插件。这个插件允许开发者在网页中创建出视觉吸引力强、响应式的曲线效果,提升用户界面的互动性和美观度。以下是关于这个主题...

    jquery css 加载插件

    在实际应用中,可以使用jQuery的`.load()`方法监听页面内容的加载,然后在适当的时候添加或移除加载指示器的CSS类。例如,当页面开始加载时,可以通过JavaScript将一个包含加载动画的元素显示出来,加载完成后则将其...

    jQuery css3打开遮罩图片形状过渡动画效果

    在IT行业中,jQuery和CSS3是两种非常重要的前端技术,它们在网页动态效果和样式设计上发挥着关键作用。本文将深入探讨如何结合jQuery和CSS3实现一个遮罩图片形状过渡动画效果,这是一种常见的交互设计,能提升用户...

    jquery css3仿游戏网站环形菜单代码.rar

    此外,CSS3的伪类选择器如`:hover`和`:active`可以用来改变菜单项在不同状态下的样式,增加互动性。 菜单弹出时的音效增强了用户体验,这种细节处理让网站显得更加专业。实现音效通常需要引入音频元素`&lt;audio&gt;`,并...

    jQuery CSS3漂亮的tooptip提示框动画特效

    "jQuery CSS3漂亮的tooptip提示框动画特效"是一个利用JavaScript库jQuery和CSS3技术创建的动态、美观的提示框解决方案。这个项目旨在提升用户体验,使用户在无需离开当前页面的情况下就能获取到相关信息。 首先,...

    jquery css3华丽滚动效果.zip

    在IT领域,jQuery和CSS3是两种非常重要的技术,它们被广泛用于网页设计和开发,以创建出引人入胜的交互式用户体验。本压缩包"jquery css3华丽滚动效果.zip"显然聚焦于如何利用这两种技术来实现一种动态、华丽的滚动...

    jQuery+css 流程图插件

    **jQuery+CSS流程图插件详解** 在网页开发中,流程图是一种常见且重要的可视化工具,用于展示逻辑步骤或工作流程。"jQuery+css 实现的单分支流程图插件"是一个利用JavaScript库jQuery和CSS样式来创建简单、动态流程...

    jquery css3图片文字介绍鼠标滚动页面动画单页

    【标题】"jQuery CSS3图片文字介绍鼠标滚动页面动画单页"主要涉及到的是网页动态效果的实现技术,其中核心是jQuery库和CSS3这两个关键工具。这篇文章或教程可能旨在教授如何利用这两种技术来创建一个富有视觉吸引力...

    jQuery css3旅游网鼠标悬停图片文字动画效果

    在实际项目中,我们可以创建一个HTML结构,包含图片和文字描述,然后用jQuery监听鼠标悬停事件,修改元素的CSS类,触发CSS3动画。同时,为了保证兼容性和性能,可以使用Modernizr这样的库检测浏览器对CSS3特性的支持...

    jquery css 跑步效果

    "jQuery CSS 跑步效果"就是一种这样的效果,它通常用于创建一个类似人物跑步或者物体移动的动画,给用户带来生动有趣的视觉体验。下面我们将深入探讨如何利用jQuery和CSS来实现这种跑步效果。 **jQuery简介** ...

    jQuery官网CSS样式复刻

    在本项目中,“jQuery官网CSS样式复刻”是一项旨在重现jQuery官方网站前端界面样式的实践任务。这个任务主要涉及五个核心技术领域:jQuery、CSS、JavaScript(包括ECMAScript)、HTML以及网页资源管理。下面我们将...

    jquery css3带透明背景登录注册表单代码.rar

    例如,表单在用户聚焦或离开输入框时的边框颜色变化,或者点击按钮时的反馈效果,这些都是通过jQuery的事件监听和CSS3的过渡效果实现的。 总的来说,这个模板为开发者提供了一个起点,可以在此基础上根据自己的需求...

    jQuery css3猎豹浏览器宽屏banner焦点图切换代码

    CSS3是CSS的最新版本,提供了许多新的特性和功能,如选择器、伪类、边框和背景、布局模式、动画和过渡等。在这个宽屏banner中,CSS3被用来实现平滑的过渡效果、圆角、阴影以及自定义字体等视觉增强效果。特别是CSS3...

    jquery css3带背景透明登录注册表单提交代码

    在IT领域,jQuery和CSS3是两个非常关键的技术,它们被广泛用于网页开发,特别是创建交互性和视觉吸引力的用户界面。本项目“jquery css3带背景透明登录注册表单提交代码”显然涉及到这两个技术的结合,旨在实现一个...

    10个漂亮登录页面,jquery+css3

    10个漂亮登录页面,jquery+css310个漂亮登录页面,jquery+css310个漂亮登录页面,jquery+css310个漂亮登录页面,jquery+css310个漂亮登录页面,jquery+css310个漂亮登录页面,jquery+css3

Global site tag (gtag.js) - Google Analytics