收藏
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>attr()和CSS()方法</title>
<style type="text/css">
.box1 {
width: 1000px;
height: 800px;
margin-left: 5px;
/*background-color: wheat;*/
margin: 10px;
position: relative;
}
.divBtn {
margin-top: 50px;
}
button {
width: 100px;
height: 50px;
background-color: skyblue;
color: red;
text-align: center;
border-style: none;
}
img{
width: 150px;
height: 150px;
margin-top: 15px;
}
</style>
</head>
<body>
<div class="box1">
<img src="../images/jsy.jpg">
<div id="divBtn">
<button type="button" id="btnCSS">CSS()读写</button>
<button type="button" id="btnAttr">attr()读写</button>
<button type="button" id="btnW">width()方法</button>
<button type="button" id="btnH">height()方法</button>
<button type="button" id="btnPos">position()方法</button>
<button type="button" id="btnOffset">offset()方法</button>
<button type="button" id="btnDef">默认值</button>
</div>
</div>
</body>
</html>
<!-- 1.在线引用 -->
<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<!-- <script type="text/javascript" src="../js/jquery-3.3.1.js"></script> -->
<script type="text/javascript">
//1.Css方法设置样式
$("#btnCSS").click(function(){
$("img").css('width','200')
$("img").css('height','200')
$("img").css('border-radius','10%')
$("img").css('box-shadow','3px 3px 3px #888')
//简写
// $("img").css({
// 'width':'200',
// 'height':'200',
// 'border-radius':'10%',
// 'box-shadow': '2px 2px 2px #888'
// })
alert('CSS方法：图片width=' + $("img").css('width'))
})
//2. attr 方法
$("#btnAttr").click(function(){
$("img").attr('src','../images/gyy.jpg')
$("img").attr('style','border-radius:20%;box-shadow:3px 3px 3px #666;width:200px;height:200px')
// $("img").removeAttr('style')
alert('attr方法：图片src=' + $("img").attr('src'))
})
//3.width()方法读写
$("#btnW").click(function(){
$("img").width('+=50')
alert('width()方法：图片width=' + $("img").width())
})
//4.height()方法读写
$("#btnH").click(function(){
$("img").height('+=50')
alert('height()方法：图片height=' + $("img").height())
})
//5.position()方法
$("#btnPos").click(function(){
var x = $("#btnCSS").position()
alert('CSS()读写按钮position.left=' + x.left + ';' + 'top=' + x.top)
})
//6.Offset()方法
$("#btnOffset").click(function(){
var y = $("img").offset()
alert('图片Offset.left=' + y.left + ';' + '图片top=' + y.top)
})
//7. 还原初始照片
$("#btnDef").click(function(){
$("img").attr('src','../images/jsy.jpg')
$("img").removeAttr('style');
})
</script>点击 "运行实例" 按钮查看在线实例
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
