样式操作

最新推荐文章于 2021-09-30 08:57:36 发布
最新推荐文章于 2021-09-30 08:57:36 发布
阅读量97 收藏
点赞数
分类专栏： jQuery
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/sundanping_123/article/details/100191787
版权

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
	<script type="text/javascript">
		$(function(){

			var $div = $('#box');

			// 读取属性值
			var sTr = $div.css('fontSize');

			alert(sTr);

			// 写属性值
			$div.css({'color':'red','backgroundColor':'pink','fontSize':'20px'});


			/*
			原生js无法读取行间没有定义的css属性值
			var oDiv = document.getElementById('box');
			alert(oDiv.style.fontSize);

			*/

		})

	</script>
</head>
<body>
	<div id="box">div元素</div>
</body>
</html>

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
	<script type="text/javascript">
		$(function(){

			var $div = $('.box');

			// 在原来样式名的基础上加上“big”的样式名
			$div.addClass('big');

			// 在原来样式名的基础上去掉“red”的样式名
			$div.removeClass('red');
			
		})

	</script>
	<style type="text/css">
		
		.box{
			width:100px;
			height:100px;
			background-color:gold;
		}

		.big{
			font-size:30px;
		}


		.red{
			color:red;
		}


	</style>
</head>
<body>
	<div class="box red">div元素</div>
</body>
</html>
小哦--
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue项目引入scss、elementui使用全局scss修改主题色，vue的路由引入；less的使用
JHLIN的博客
06-05 1万+
一、vue项目引入scss https://blog.csdn.net/Ag_wenbi/article/details/87799557 二、elementui使用全局scss修改主题色 1、在项目下新建color.css，内容位置如下 内容： $--color-primary: #EE1D23; $--font-path: '~element-ui/lib/theme-chal...
jquery样式操作
qq_28596151的博客
05-27 841
    jquery进行的样式操作方法有addClass()、removeClass()、toggle()和hasClass()。下面我们一一讲解。1、addClass()追加样式    语法：$(selector).addClass(class);selector是query选择器，class是待添加的样式。就是给匹配到的元素添加指定的样式。比如：$("li").addClass("red");...
样式操作和类操作
UNDEFINED_AUBE的博客
12-19 274
样式操作 样式属性操作  .css() 作用：设置/获取元素的样式属性值 设置样式属性操作 设置单个样式     ·第一个参数：样式属性名称 ·第二个参数：样式属性值 设置多个样式 ·参数为{}对象 获取样式属性操作(参数表示要获取的样式的属性名称) 类操作 1、添加类样式：addClass(“”)   à   为指定元素添加类
js中css样式的操作
charlene0824的博客
01-17 2740
HTML中定义样式的方式有三种：通过元素包含外部样式表文件、使用元素定义嵌入式样式，以及使用style特性定义针对特定元素的样式。“DOM2级样式"模块围绕这3种应用样式提供了一套API。要确定浏览器是否支持DOM2级定义的CSS能力，可以使用下列代码： var supportsDOM2CSS=document.implementation.hasFeature("CSS","2.0"; var
VUE中V-IF条件判断改变元素的样式操作
12-28
方法一 v-if判断后用标签改变样式（特定显示列字体加粗） (col,i) in cols'> <v><b>{{col.text}}</b></v> <v class='align-end mystyle'><b>{{item[col['value']]}} </v-list-i
vue-router为激活的路由设置样式操作
11-20
在Vue.js应用中，Vue Router是官方推荐的路由管理库，它使得页面间的...以上就是关于Vue Router为激活的路由设置样式操作的详细说明，希望对你的开发工作有所帮助。记得在实际项目中灵活运用这些技巧，以提高用户体验。
JQueryDOM之样式操作
12-10
设置样式和获取样式 class 也是节点元素的属性，因此获取class 和设置class 都可以使用attr()方法来完成 追加样式 直接使用attr()方法设置class属性，会将原来的class属性替换掉 如果在添加新的样式时，还需要保留...
JQ 样式操作
08-13
本文将深入探讨“JQ样式操作”这一主题，帮助你理解如何利用jQuery高效地改变、添加和删除网页元素的样式。 首先，了解基本的JQ选择器是至关重要的。jQuery的选择器基于CSS，允许你根据ID、类、属性等选取元素。...
jQuery常用样式操作实例分析(获取、设置、追加、删除、判断等)
10-21
在网页开发中，jQuery 提供了丰富的API来处理...在实际项目中，jQuery的样式操作常与事件处理、动画效果等结合使用，以创建更复杂的用户界面。学习并熟练掌握这些操作，对于提升网页开发效率和代码质量具有重要意义。
CSS样式操作大全——基本语法篇
happy81997的博客
03-31 1854
CSS样式操作大全
样式操作（className)
gebieren的博客
09-30 899
通过className属性对元素的类名进行操作。 通过HTML5新增的classList属性对元素的类名进行操作。 通过Style属性设置元素的行内样式。 通过getComputedStyle方法获取元素的计算后样式。 通过offset系列，scroll系列，client系列属性来操作元素的组合样式。 ClassName操作 说明：通过ClassName操作元素的类名是最简单的方式，但是如果仅仅想增加或者删除某一个具体的类名的时候，不是特别方便。 ClassList属性 说明：使用classList.
JQ DOM 样式操作
qq_38636998的博客
10-26 1452
样式操作 一、 概要 通过JavaScript获取dom元素上的style属性，我们可以动态的给元素赋予样式属性。在jQuery中我们要动态的修改style属性我们只要使用css()方法就可以实现了 二、CSS() 1、作用 css()函数用于设置或返回当前jQuery对象所匹配的元素的css样式属性值 如果需要删除指定的css属性，使用函数将其值设为空字符串("") 2、语法格式 格...
JS样式操作
CSDN
03-04 518
行内样式 特点： 设置 style.属性名 设置到元素行内 获取 style.属性名 可以获取行内的样式 获取不到文本内部以及外部样式 box.style.width = '400px'; box.style.backgroundColor = 'black' # 计算样式（获取文本外部的样式） 获取元素文本外属性值： getComput...
js操作样式
weixin_38312226的博客
08-28 802
DOM样式属性和方法：   指定的元素，它的style有这么几个属性和方法：   cssText：通过这个属性可以访问到元素的特性style设置的属性，并且可以直接赋值设置。   removeProperty（属性名称）：从样式中删除给定属性。   setProperty（属性名称，值，权重）：可以通过这个方法设置给定样式的同时设置其权重，可以传入”important”或者一个空字...
animate动画
sundanping_123的博客
09-02 5027
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script type="text/javascript" src="js/jquery-1.12.4.min.js"></s...
绑定click事件、获取元素索引值
sundanping_123的博客
09-02 1296
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script type="text/javascript" src="js/jquery-1.12.4.min.js"></s...
bootstrap路径导航、下拉菜单
sundanping_123的博客
09-04 748
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0,...
DOM的样式操作
最新发布
06-01
DOM（文档对象模型）是一种用于处理HTML和XML文档的标准模型。下面是一些基本的DOM样式操作： 1. 获取元素样式：通过DOM可以获取元素的样式，例如： ```javascript var element = document.getElementById("myElement"); var style = window.getComputedStyle(element); var color = style.getPropertyValue("color"); ``` 2. 设置元素样式：可以使用DOM设置元素的样式，例如： ```javascript var element = document.getElementById("myElement"); element.style.color = "red"; ``` 3. 添加/移除元素类：可以使用DOM添加或移除元素的类，例如： ```javascript var element = document.getElementById("myElement"); element.classList.add("myClass"); element.classList.remove("myClass"); ``` 4. 获取/设置元素尺寸：可以使用DOM获取或设置元素的尺寸，例如： ```javascript var element = document.getElementById("myElement"); var width = element.offsetWidth; var height = element.offsetHeight; element.style.width = "100px"; element.style.height = "100px"; ``` 这些是DOM样式操作的一些基本用法，还有许多其他的操作，可以根据具体情况进行学习和使用。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值