jq 操作元素样式

最新推荐文章于 2023-03-07 16:44:21 发布
最新推荐文章于 2023-03-07 16:44:21 发布
阅读量288 收藏
点赞数
分类专栏： jQuery 文章标签： jQuery
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43294560/article/details/103039772
版权 
**返回css样式内容**

	对象数组.css("样式名")
			function t2()
		{
			var showdiv=$("#showdiv");
			alert(showdiv.css("width"));
		}
		js.style方法不能获取写在css代码域内的样式
		
**增加/修改样式**
		数值可以不加px，如要加需要'400px' 括起来
		
	对象数组.css("样式名","修改样式")
			function t1()
		{
			var showdiv=$("#showdiv");
			//操作样式
			showdiv.css("background-color","red");
		}
		
	在原值基础上修改	
		对象数组.css('样式名','+=200');    在原来基础上增加200px
		

**增加多个样式**
	数值可以不加px，如要加需要'400px' 括起来
	
	对象数组.css({"样式名":"样式值","样式名":"样式值","样式名":"样式值"...})
			function t3()
		{
			var div=$("#div01");
			div.css({"border":"solid 2px orange","width":"300px","height":"200px"});
		}
		
**通过类选择器添加样式**

	对象数组.addClass("类选择器名")
			function t4()
		{
			var div=$("#div01");
			div.addClass("common");
		}
		
**移除类选择器样式**

	对象数组.removeClass("类选择器名")
			function t5()
		{
			var div=$("#div01");
			div.removeClass("common");
		}

代码示例:

<html>
	<head>
		<meta charset="utf-8">
		<title>jq 操作元素样式</title>
		<script type="text/javascript" charset="utf-8" src="js/jquery-3.4.1.js"></script>
		<script type="text/javascript">
			function t1()
			{
				var showdiv=$("#showdiv");
				//操作样式
				showdiv.css("background-color","red");
			}
			function t2()
			{
				var showdiv=$("#showdiv");
				alert(showdiv.css("width"));
			}
			function t3()
			{
				var div=$("#div01");
				div.css({"border":"solid 2px orange","width":"300px","height":"200px"});
			}
			function t4()
			{
				var div=$("#div01");
				div.addClass("common");
			}
			function t5()
			{
				var div=$("#div01");
				div.removeClass("common");
			}
		</script>
		<style type="text/css">
			#showdiv{
				width:100px;
				height:200px;
				border:solid 2px;
			}
			.common{
				width:100px;
				height:200px;
				border:solid 2px;
				background-color: purple;
			}
		</style>
	</head>
	<body>
		<input type="button" value="修改样式" onclick="t1()"/>
		<input type="button"  value="返回样式" onclick="t2()"/>
		<input type="button"  value="操作多个样式" onclick="t3()"/>
		<input type="button" value="操作类选择器"  onclick="t4()"/>
		<input type="button"  value="移除类选择器样式" onclick="t5()" />
		<hr/>
		<div id="showdiv" >
			
		</div>
		<div id="div01" class="common">
			
			
		</div>
	</body>
</html>
神奇大叔
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
jQuery操作元素的样式
微风吹过李子树的博客
12-27 844
jQuery操作元素的样式 1、attr操作class attr(“class”) 获取元素的样式名 attr(“class”,“属性值”) 设置元素的样式值（原有的会被覆盖） 2、css()操作样式 添加元素的具体样式添加的样式会在style标签当中 css(“样式名”,“样式值”) 设定某一个具体样式 css({“样式名1”:“样式值1”,“样式名2”:“样式值2”…}) 设置多个具体样式 a...
jQuery中的样式操作、元素操作、属性操作
wutong_jun的博客
04-12 719
主要是遍历、创建、添加、删除元素操作。 遍历元素 jQuery隐式迭代是对同一类元素做了同样的操作。如果想要给同一元素做不同操作,就需要用到遍历。 语法1: $ ("div") .each (function (index, domEle) { xxx; } ) $('div').each(function (index, domELe) { console.log(index);//得到索引号 可以自己指定索引号名称 console.log(domELe);// <div>1
jQuery 样式操作 与 效果
凉茶铺的博客
12-29 2861
介绍了JQuery如何操作css和动画效果的操作
jQuery 对元素样式的操作
qq_46178261的博客
04-22 264
1 操作css方法 jQuery可以使用css()方法来修改简单元素样式；也可以操作类，修改多个样式。 参数只写属性名，则是返回属性值 $(this).css("color"); 参数是（属性名，属性值）逗号分隔，是设置一组样式，属性必须加引号，值如果是数字可以不带单位和引号 $(this).css("color","red") 参数可以是对象形式，方便设置多组样式。属性名和属性值用冒号...
快速上手jQuery：样式操作、效果
黑马程序员官方博客
03-07 1022
1. 语法2. 参数（1）params: 想要更改的样式属性，以对象形式传递，必须写。属性名可以不用带引号， 如果是复合属性则需要采取驼峰命名法 borderLeft。其余参数都可以省略。（2）speed：三种预定速度之一的字符串(“slow”,“normal”, or “fast”)或表示动画时长的毫秒数值(如：1000)。（3）easing：(Optional) 用来指定切换效果，默认是“swing”，可用参数“linear”。（4）fn: 回调函数，在动画完成时执行的函数，每个元素执行一次。
jQuery 样式操作
qq_41421033的博客
11-25 437
jQuery 样式操作 ​ jQuery中常用的样式操作有两种：css() 和 设置类样式方法 方法1: 操作 css 方法 ​ jQuery 可以使用 css 方法来修改简单元素样式； 也可以操作类，修改多个样式。 ​ 常用以下三种形式 : // 1.参数只写属性名，则是返回属性值 var strColor = $(this).css('color'); // 2. 参数是属性名，属性值，逗号分隔，是设置一组样式，属性必须加引号，值如果是数字可以不用跟单位和引号 $(this).css(''color
JQ 样式操作
08-13
本文将深入探讨“JQ样式操作”这一主题，帮助你理解如何利用jQuery高效地改变、添加和删除网页元素的样式。 首先，了解基本的JQ选择器是至关重要的。jQuery的选择器基于CSS，允许你根据ID、类、属性等选取元素。...
jQuery操作元素css样式的三种方法
10-25
jQuery里提供三种方法来改变页面元素的样式，虽然它们和传统方法的思想相通，但是却节省了许多代码
JQueryDOM之样式操作
12-10
注意：当一个节点元素包含了多个class样式时，将按照以下方式进行处理： 如果给一个元素添加了多个 class 值， 那么就相当于合并了它们的样式 如果有不同的 class 设定了同一样式属性， 则后者覆盖前者  移除样式...
jquery如何判断某元素是否具备指定的样式
12-11
总的来说，jQuery提供了一种方便的方式来检查和操作元素的样式。对于行内样式，我们使用`.attr("style")`并搜索目标样式名称；而对于类样式，我们通过`.attr("class")`并用`indexOf`检测类名。这些技巧在动态修改...
JQuery操作DOM元素
08-01
该文档包含了样式操作，内容及Value属性值操作，节点操作，节点属性操作，节点遍历操作的基础知识，也许不够详细，但内容也应该足够平时操作了，希望能帮到大家
JQuery基础修炼-样式篇
weixin_34368949的博客
05-24 235
jQuery对象转化成DOM对象 jQuery库本质上还是JavaScript代码，它只是对JavaScript语言进行包装处理，为了是提供更好更方便快捷的DOM处理与开发常见中经常使用的功能。我们可以用jQuery的同时也能混合JavaScript原生代码一起使用。通过jQuery生成的对象是一个做了包装处理的对象，如果要用jQ...
JQ常见样式操作方法
weixin_43802883的博客
08-06 491
JQ常见样式操作方法 1、JQ操作CSS方法 返回属性值： $(‘this’).css(‘color’);在css里直接给出属性名称即可得到该属性值； 修改属性值： $(this).css(‘color’,‘red’); $(this).css(‘width’,100); 写法：‘属性名’+‘值’，如果是数字的话可以不用双引号; 修改属性值（对象形式） $(this).css({‘color’:‘white’,‘font-size’:‘20px’}); 属性与属性值直接用“；”冒号隔
jQuery操作样式及属性样式
qq_40890544的博客
10-19 4546
jQuery操作样式（css操作、class操作） jQuery属性样式（attr属性、prop属性）
jQuery设置元素样式
webpon
08-10 433
jQuery可以使用css()方法来修改简单元素样式；也可以操作类，修改多个样式。 1、参数只写属性名，则返回属性值 　 $(this).css("color"); 2、参数是属性名，属性值，逗号分隔，是设置一组样式，属性名必须加引号，值如果是数字可以不用跟单位和引号 　　$(this).css("color","red"); 3、参数可以是对象形式，方便设置多组样式。属性名和属性值...
jQuery学习之操作元素样式
独狼的博客
06-27 173
<html> <head> <title>操作元素样式</title> <meta charset="UTF-8"/> <!--声明css--> <style type="text/css"> #showdiv{ width: 300px; height: 300px; border: solid 1px; } .common{ width: 300px;
jq swiper(各种轮播图样式)
weixin_43294560的博客
12-13 3220
具体样式教程查看地址swiper 各种样式引用地址各种样式 引入swiper.min.css文件 swiper.jquery.min.js 文件 步骤：安装教程引入框架，然后再根据样式地址中的样式可以添加其他样式 添加的其他样式写在js代码域里，方式为参数名:‘样式名’ 代码示例: <!DOCTYPE html> <html> <head> &l...
jq 通过 属性获取元素
最新发布
05-09
jQuery 是一种非常常见的 JavaScript ...总之，JQ 通过属性获取元素的能力大大提高了页面开发的效率，能够更加方便地完成 HTML 页面元素的选择和操作，同时也方便了前端开发人员和网站设计师进行页面的布局和样式设计。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值