首页 > 其他分享 >无涯教程-jQuery - css( name, value )方法函数

无涯教程-jQuery - css( name, value )方法函数

时间:2023-07-30 18:32:18浏览次数:51  
标签:jQuery name 示例 color 无涯 value div css

css(name,value)方法将单个样式属性设置为所有匹配元素上的值。

css( name, value ) - 语法

selector.css( name, value )

这是此方法使用的所有参数的描述-

  • name    -  要设置的属性的名称。

  • value     -  属性的值。

css( name, value ) - 示例

以下是一个简单的示例,简单说明了此方法的用法-

<html>
   <head>
      <title>The jQuery Example</title>
      <script type="text/javascript" 
         src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
      </script>
		
      <script type="text/javascript" language="javascript">
         $(document).ready(function() {
			
            $("div").click(function () {
               var color=$(this).css("background-color");
               $("#result").html("That div is <span>" + color + "</span>.");
               $("#result").css("color", color);
            });
				
         });
      </script>
		
      <style>
         div { width:60px; height:60px; margin:5px; float:left; }
      </style>
   </head>
	
   <body>
      <p>Click on any square:</p>
      <span id="result"> </span>
		
      <div style="background-color:blue;"></div>
      <div style="background-color:rgb(15,99,30);"></div>
      <div style="background-color:#123456;"></div>
      <div style="background-color:#f11;"></div>
   </body>
</html>

这将产生以下输出-

参考链接

https://www.learnfk.com/jquery/css-name-value.html

标签:jQuery,name,示例,color,无涯,value,div,css
From: https://blog.51cto.com/u_14033984/6901750

相关文章

  • 无涯教程-jQuery Online Test函数
    jQuery在线测试模拟了真正的在线认证考试。您将看到基于jQuery框架概念的多项选择题(MCQ),将为您提供四个options。您将为该问题选择最合适的答案,然后继续进行下一个问题,而不会浪费时间。完成完整的考试后,您将获得在线考试分数。总问题数-20最长时间-20分钟StartTe......
  • 3.声明式API及指令式命令创建namespace、pod、service
    应用编排运行在kubernetes上的条件1、以容器化形式,得有可用的Image2、编排、调度、运行应用的最小单元是pod3、Controller模式(控制器模式)4、声明式API声明式API声明式API:声明资源对象的终态,达成终态的依赖项是Controller声明多个资源终态:以应用为中心工作负载型......
  • 无涯教程-jQuery Online Quiz函数
    以下测验提供与jQueryFramework相关的多项选择题(MCQ)。您将必须阅读所有给定的答案,然后单击正确的答案。如果您不确定答案,则可以使用显示答案按钮检查答案。您可以使用下一个测验按钮检查测验中的新问题集。Q1-如何获得传递给函数的参数总数?A-使用args.length属性......
  • 无涯教程-jQuery Interview Questions函数
    尊敬的读者,这些jQuery面试问题是专门设计的,目的是让您熟悉在您采访jQuery时可能遇到的问题的性质。根据我的经验,优秀的面试官几乎不会计划在面试过程中提出任何特定的问题,通常,问题是从该主题的一些基本概念开始的,然后根据进一步的讨论和您的回答继续进行讨论-Whatisj......
  • 无涯教程-jQuery - Tabs组件函数
    窗口小部件选项卡函数可与JqueryUI中的窗口小部件一起使用。选项卡用于在分成逻辑部分的内容之间交换。Tabs-语法$("#tabs").tabs();Tabs-示例以下是显示Tab用法的简单示例-<!doctypehtml><htmllang="en"><head><metacharset="utf-8"><title>......
  • 无涯教程-jQuery - Spinner组件函数
    WidgetSpinner函数可与JqueryUI中的窗口小部件一起使用。Spinner提供了一种从一组中选择一个值的快速方法。Spinner-语法$("#menu").selectmenu();Spinner-示例以下是显示Spinner用法的简单示例-<!doctypehtml><htmllang="en"><head><metacharset="......
  • 无涯教程-jQuery - Progressbar组件函数
    小部件进度条功能可与JqueryUI中的小部件一起使用。一个简单的进度条显示有关进度的信息。一个简单的进度条如下所示。Progressbar-语法$("#progressbar").progressbar({value:37});Progressbar-示例以下是显示进度条用法的简单示例-<!doctypehtml><htmllang......
  • 无涯教程-jQuery - Menu组件函数
    小部件菜单功能可与JqueryUI中的小部件一起使用。一个简单的菜单显示项目列表。Menu-语法$("#menu").menu();Menu-示例以下是显示菜单用法的简单示例-<!doctypehtml><htmllang="en"><head><metacharset="utf-8"><title>jQueryUIM......
  • 无涯教程-jQuery - Dialog组件函数
    小部件对话框函数可与JqueryUI中的小部件一起使用。对话框是在HTML页面上显示信息的一种不错的方法。对话框是一个带有标题和内容区域的浮动窗口。此窗口可以移动,调整大小,并且默认情况下可以使用"X"图标关闭。Dialog-语法$("#dialog").dialog();Dialog-示例以下是显示......
  • 无涯教程-jQuery - Datepicker组件函数
    WidgetDatePicker函数可与JqueryUI中的窗口小部件一起使用。重点放在输入上,以小巧的方式打开交互式日历。Datepicker-语法$("#datepicker").datepicker();Datepicker-示例以下是显示DatePicker用法的简单示例-<!doctypehtml><htmllang="en"><head><m......