jQuery 基础修改元素样式

最新推荐文章于 2024-11-11 11:09:58 发布

purple_lumpy

最新推荐文章于 2024-11-11 11:09:58 发布

阅读量2.9k

点赞数

CC 4.0 BY-SA版权

分类专栏： JQuery

本文链接：https://blog.youkuaiyun.com/purple_lumpy/article/details/79454974

JQuery 专栏收录该内容

18 篇文章

订阅专栏

本文介绍了使用jQuery进行网页元素样式的修改方法，包括添加、删除类名，直接修改CSS属性，调整元素尺寸及位置等。同时，还讲解了如何获取和设置元素的内容。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

修改元素样式

一、修改元素的类 addClass(names) removeClass(names)

给元素增加类：

	<script type="text/javascript">
		$(function(){

			var element = $('#demo');
			element.addClass('red b10')
		})
	</script>

	<script type="text/javascript">
		$(function(){

			var element = $('#demo');
			// element.addClass('red b10');
			// element.removeClass('red');
			element.addClass(function(index,className){
				// index 是element的多个元素时，的index
				// className 是该元素的class name
				return "red s" // 增加两个类
			})
		})
	</script>

给元素删除类：

	<script type="text/javascript">
		$(function(){

			var element = $('#demo');
			element.removeClass('red');
		})
	</script>

	<script type="text/javascript">
		$(function(){

			var element = $('#demo');
			// element.addClass('red b10');
			// element.removeClass('red');
			element.addClass(function(index,className){
				// index 是element的多个元素时，的index
				// className 是该元素的class name
				return "red s" // 增加两个类
			})
			element.removeClass(function(index,className){
				return "s"
			})
		})
	</script>

hasClass() 方法：

	<script type="text/javascript">
		var element = $('#demo');

		if( element.hasClass('hide') ){
			element.removeClass('hide');
		}else{
			element.addClass('hide');
		}
	</script>

上述代码的一个简便方法：

toggleClass()

	<script type="text/javascript">
		var element = $('#demo');

		if( element.hasClass('hide') ){
			element.removeClass('hide');
		}else{
			element.addClass('hide');
		}

		$('li').each(function(index){
			// 自动判断，如果没有red类则加上，否则删除该类
			$(this).toggleClass('red', index % 2 == 0)
		})
	</script>

二、直接修改元素的样式

获取或修改样式

css(name,value) 方法

	<script type="text/javascript">
		$(function(){
			var element = $('#demo');

			element.css('width','400px');

			element.css({
				'background-color':'red',//或者使用驼峰型
				height:400,
				border:'10px solid #000',
				marfinTop:100,
				width:'-=100'

			})

			element.css('height',function(index,value){
				return parseInt(value,10) + 100;
			})

			// 获取值
			console.log(element.css('height'))
		})
	</script>

三、获取或设置元素的尺寸

width() height() 方法

width(value)

innerWidth(value) -- 仅包含内边距

outerWidth(value) -- 仅包含内边距、边框

outerWidth(true) -- 仅包含内边距、边框、外边距

...

	<script type="text/javascript">
		var element = $('#demo');

		console.log(element.height())
		console.log(element.width())
	</script>

四、获取与设置元素的位置与浮动

offset(coordinates) 可见的最左上角的相对于左上角的偏移

	<script type="text/javascript">
		$(function(){
			var box = $('.box');
			var item = $('.item');

			console.log(box.offset())
		})
	</script>

position（）获取的是离该元素最近的父级，有相对位置的元素的偏移；若没有，则返回的是与文档的偏移

	<script type="text/javascript">
		$(function(){
			var box = $('.box');
			var item = $('.item');

			console.log(box.offset()) // 外边距
			console.log(item.position())
		})
	</script>

scrollLeft(value) scrollTop(value) 相对于滚动条初始的偏移

五、修改元素内容

获取、设施元素内容，有两种方法： html() html(content) 与 text() text(content)

示例：

	<script type="text/javascript">
		$(function(){
			var elements = $('li')

			console.log(elements)
			console.log(elements.html());// 仅对jquery对象中，也就是elements中第一个元素起作用
			console.log(elements.text());// 对jquery对象中，也就是elements中所有元素起作用

			elements.html('<strong>iiiiitem</strong>') // 对jquery对象中，也就是elements中所有元素起作用
			elements.text('<strong>iiiiitem</strong>') // 对jquery对象中，也就是elements中所有元素起作用
		})
	</script>