实例
<!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>运行实例 »
点击 "运行实例" 按钮查看在线实例
