实例
<!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: lightgreen;
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">
//css()和attr()类似，自带getter/ setter
//1.设置样式：css(name[,value])
//var res = $('img').css('width',200)
//var res = $('img').css('width','200px')
//var res = $('img').css('border-radius','10%')
//var res = $('img').css('box-shadow','5px 5px 5px #888')
//链式操作
//var res = $('img').css('width','200px')
// .css('border-radius','10%')
// .css('box-shadow','5px 5px 5px #888')
// var res = $('img').css({
// 'width':'200px',
// 'border-radius':'50%',
// 'box-shadow':'5px 5px 5px #888'
// })
//JSON：不接受变量，只允许出现字面量、常量。
//JSON数据类型有：字符串类型、布尔型、数值型。
//注：布尔型和数值型不需要双引号，同时还支持对象和数组。
//格式：所有属性名合数性值全部用双引号，不能用单引号。
var res = $('img').css({
"width":"200px",
"border-radius":"50%",
"box-shadow":"5px 5px 5px #888"
})
//获取当前图片的宽度
var res = $('img').css('width')
//200px是字符串，不能用
var res = parseInt($('img').css('width'))
//图片加宽
res += 100
var res = $('img').css('width',res + 'px')
var res = $('img').css('width')
//3.height(), width()
//var
// var res = $('img').width()
var res = $('img').width(200)
// var res = $('img').width('300')
// // var res = $('img').width('300pt')
// // var res = $('img').width('100px')
// var res = $('img').width()
// var res = $('img').width('+=100')
// var res = $('img').css('width','+=100')
//4.定位：offset()
var res = $('img').offset()
var res = $('img').offset().top
var res = $('img').offset().top+'px'
//5.绝对定位：position
var res = $('.box2').position()
var res = $('.box2').position().left+'px'
//6.scrollLeft() 返回水平滚动条的位置
// scrollTop() 返回垂直滚动条的位置
//控制台输出
console.log(res)
</script>运行实例 »
点击 "运行实例" 按钮查看在线实例
