<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>内联样式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/hg.jpg">
<div>
<div></div>
</div>
</body>
</html>
<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script type="text/javascript">
// css()和attr()类似，自带getter/setter
// 设置样式：css(neme[,value])
// var res =$('img').css('width','300px')
// // var res= $ ('img').css('width',200)
// var res =$('img').css('border-radius','10%')
// var res =$('img').css('box-shadow','5px 5px 5px #888')
// // 链似操作
// var res=$('img').css('width','300px')
// .css('border-radius','10%')
// .css('box-shadow','5px 5px 5px #888')
var res=$('img').css({
'width':'200px',
'border-radius':'40%',
'box-shadow':'5px 5px 5px #888'
})
// // 杰森改法
// var res=$('img').css({
// "width":"200px",
// "border-radius":"40%",
// "box-shadow":"5px 5px 5px #888"
// })
var res =parseInt($('img').css('width'))
res+=200
var res=$('img').css('width',res+'px')
var res=$('img').css('width')
// height(),width()
// var res=$('img').width(200)
// var res=$('img').width('200pt')
var res=$('img').width(200)
// 等于43行代码
//
// 增加wihdth长度
var res=$('img').width('+=50')
// var res=$('img').width('width','+=50')
// offset()
var res=$('img').offset()
// 获取与上边的距离想要获得的是数值请在top后面加+px
var res=$('img').offset().top
// position()
var res= $('box2').position()
var res= $('box2').position()+'px'
// 控制台输出
console.log(res)
</script>
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>内联样式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/hg.jpg">
<div class="box1">
<div class="box2"></div>
</div>
</body>
</html>
<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script type="text/javascript">
// css()和attr()类似，自带getter/setter
// 设置样式：css(neme[,value])
// var res =$('img').css('width','300px')
// // var res= $ ('img').css('width',200)
// var res =$('img').css('border-radius','10%')
// var res =$('img').css('box-shadow','5px 5px 5px #888')
// // 链似操作
// var res=$('img').css('width','300px')
// .css('border-radius','10%')
// .css('box-shadow','5px 5px 5px #888')
var res=$('img').css({
'width':'200px',
'border-radius':'40%',
'box-shadow':'5px 5px 5px #888'
})
// // 杰森改法
// var res=$('img').css({
// "width":"200px",
// "border-radius":"40%",
// "box-shadow":"5px 5px 5px #888"
// })
var res =parseInt($('img').css('width'))
res+=200
var res=$('img').css('width',res+'px')
var res=$('img').css('width')
// height(),width()
// var res=$('img').width(200)
// var res=$('img').width('200pt')
var res=$('img').width(200)
// 等于43行代码
//
// 增加wihdth长度
var res=$('img').width('+=50')
// var res=$('img').width('width','+=50')
// offset()
var res=$('img').offset()
// 获取与上边的距离想要获得的是数值请在top后面加+px
var res=$('img').offset().top
// position()
var res= $('box2').position()
var res= $('box2').position()+'px'
// 控制台输出
console.log(res)
</script>运行实例 »
点击 "运行实例" 按钮查看在线实例
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>内联样式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/hg.jpg">
<div class="box1">
<div class="box2"></div>
</div>
</body>
</html>
<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script type="text/javascript">
// css()和attr()类似，自带getter/setter
// 设置样式：css(neme[,value])
// var res =$('img').css('width','300px')
// // var res= $ ('img').css('width',200)
// var res =$('img').css('border-radius','10%')
// var res =$('img').css('box-shadow','5px 5px 5px #888')
// // 链似操作
// var res=$('img').css('width','300px')
// .css('border-radius','10%')
// .css('box-shadow','5px 5px 5px #888')
var res=$('img').css({
'width':'200px',
'border-radius':'40%',
'box-shadow':'5px 5px 5px #888'
})
// // 杰森改法
// var res=$('img').css({
// "width":"200px",
// "border-radius":"40%",
// "box-shadow":"5px 5px 5px #888"
// })
var res =parseInt($('img').css('width'))
res+=200
var res=$('img').css('width',res+'px')
var res=$('img').css('width')
// height(),width()
// var res=$('img').width(200)
// var res=$('img').width('200pt')
var res=$('img').width(200)
// 等于43行代码
//
// 增加wihdth长度
var res=$('img').width('+=50')
// var res=$('img').width('width','+=50')
// offset()
var res=$('img').offset()
// 获取与上边的距离想要获得的是数值请在top后面加+px
var res=$('img').offset().top
// position()
var res= $('box2').position()
var res= $('box2').position()+'px'
// 控制台输出
console.log(res)
</script>运行实例 »
点击 "运行实例" 按钮查看在线实例
