第05章基础 DOM 和 CSS 操作（中）-CSDN博客

本文链接：https://blog.csdn.net/iteye_17658/article/details/82636920

本文详细介绍了如何使用JavaScript操作DOM元素的样式属性，并通过jQuery和自定义JS文件实现颜色、宽度、高度等属性的获取与修改。同时，展示了如何应用CSS类来改变元素样式，包括增加、删除和切换样式，以及利用toggleClass方法实现样式间的快速切换。

摘要由CSDN通过智能技术生成

index.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>基础 DOM 和 CSS 操作</title>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="demo.js"></script>
<link type="text/css" rel="stylesheet" href="style.css" />
</head>
<body>

<div title="demo" style="color:#c00; width:600px;">
	<strong>http://onestopweb.cn/</strong>
</div>

<div title="demo" class="green">
	<strong>http://onestopweb.cn/</strong>
</div>

</body>
</html>

style.css

.red{ color:red;}
.green{ color:green;}
.bg{ background-color:#ccc;}
.size{ font-size:20px;}

demo.js

$(function(){
	//alert($('div').css('color'));
	//$('div').css('color','red');
	var box = $('div').css(['color','width','height']);
	/*
	
	for(var i in box){
		alert(i+':'+box[i]);
	}
	$.each(box,function(attr,value){
		alert(attr+':'+value);
	});
	
	//alert($('div')[0]);
	$('div').each(function(index,element){
		alert(index+':'+element);
	});
	//$('div').css('color','red').css('background-color','#ccc');
	$('div').css({
		'color':'red',
		'background-color':'#ddd',
		'width':'200px',
		'height':'30px'
	});
	$('div').css('width',function(index,value){
		//局部操作，很舒服
		return parseInt(value)-500+'px';
	});
	
	//$('div').addClass('red');
	//$('div').addClass('bg');
	//$('div').addClass('red bg size');
	//$('div').removeClass('bg');
	//$('div').removeClass('red size');
	$('div').click(function(){
		$(this).toggleClass('red size');//两个样式之间的切换，默认样式和指定样式的切换
	});
	
	var count =0;
	$('div').click(function(){
		$(this).toggleClass('red size',count++%2==0);//频率的问题
	});	
	$('div').click(function(){
		//这里只是 click 的局部，而又是 toggle 的全局
		$(this).toggleClass('red');
		if($(this).hasClass('red')){
			$(this).removeClass('green')
		}else{
			//$(this).toggleClass('green');
			$(this).addClass('green');
		}
	});
	$('div').click(function(){
		$(this).toggleClass(function(){
			return $(this).hasClass('red')?'green':'red';
		});
	});
	
	$('div').click(function(){
		$(this).toggleClass(function(){
			//局部
			if($(this).hasClass('red')){
				$(this).removeClass('red');
				return 'green';
			}else{
				$(this).removeClass('green');
				return 'red';
			}
		});
	});
	*/
	
	var count = 0;
	$(document).click(function(){
		$('div').toggleClass(function(index,className,switchBool){
			alert(index+':'+className+':'+switchBool);
			//局部
			if($(this).hasClass('red')){
				$(this).removeClass('red');
				return 'green';
			}else{
				$(this).removeClass('green');
				return 'red';
			}
		},count++%2==0);
	});
	
});