修改元素样式

一、修改元素的类 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>