0404

实例

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>5.设置内联样式css()</title>
	<style type="text/css">
		.box1 {
			width: 300px;
			height: 300px;
			background-color: wheat;

			position: relative;

		}

		.box2 {
			width: 100px;
			height: 100px;
			background-color: coral;

			position: absolute;
			top: 50px;
			left: 100px;
		}
	</style>
</head>
<body>
	<img src="../images/jsy.jpg">

	<div class="box1">
		<div class="box2"></div>
	</div>
</body>
</html>
<script type="text/javascript" src="../js/jquery-3.3.1.js"></script>
<script type="text/javascript">
	

	
	var res = $('img').css('width',200)
	var res = $('img').css('border-radius', '10%')
	var res = $('img').css('box-shadow', '3px 3px 3px #888')

	var res = $('img').css({
		'width': '200',
		'border-radius': '10%',
		'box-shadow': '3px 3px 3px #888'
	})

	
	var res = $('img').css('box-shadow')
	var res = $('img').css('width')

	
	var res = parseInt($('img').css('width'), 10) //200
	res += 50
	var res = $('img').css('width',res+'px')

	
	var res = $('img').width(200)
	var res = $('img').width('200')
	var res = $('img').width('200px')
	var res = $('img').width('200pt')

	
	var res = $('img').css('width',200)

	
	var res = $('img').width('+=100')
	var res = $('img').width()  //300
	
	var res = $('img').css('width','+=50')
	var res = $('img').width()  //250

	
	
	var res = $('img').offset()
	
	var res = $('img').offset().left
	var res = $('img').offset().top
	

	
	var res = $('.box2').position().left
	var res = $('.box2').position().top

	
	console.log(res)
</script>

运行实例 »

点击 "运行实例" 按钮查看在线实例

实例

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>4.设置元素的类样式</title>
	<style type="text/css">
		.circle {border-radius: 50%}
		.shadow {box-shadow: 3px 3px 2px #808080}
	</style>
</head>
<body>
	<img src="../images/xln.jpg" width="200" id="pic">
</body>
</html>
<script type="text/javascript" src="../js/jquery-3.3.1.js"></script>
<script type="text/javascript">
	

	
	$('#pic').addClass('circle')
	$('#pic').addClass('circle shadow')

	
	$('#pic').removeClass('circle')
	$('#pic').removeClass('shadow')
	$('#pic').removeClass('circle shadow')

	
	//如果当前元素没有添加类样式,那么自动添加上它指定的类样式
	$('#pic').toggleClass('circle shadow')

	
	$('#pic').addClass('circle')
	$('#pic').addClass('circle shadow')

	
	$('#pic').toggleClass('circle shadow')

		var res = $('#pic').hasClass('circle shadow') //false
	$('#pic').addClass('circle shadow') 
	var res = $('#pic').hasClass('circle shadow') //true

	if ($('#pic').hasClass('circle shadow')) {
		$('#pic').removeClass('circle shadow')
	} else {
		$('#pic').addClass('circle shadow') 
	}

	
	console.log(res)
	

</script>

运行实例 »

点击 "运行实例" 按钮查看在线实例

实例

实例

相关文章