用JQ写了个列例子，看不明白再问
<!DOCTYPE html><html>
<head>
<meta charset="utf-8">
</head>
<style type="text/css">
*{margin: 0padding: 0}
.demo {
border: 1px solid #000000
width: 350px
height: 150px
}
.btn button{width: 35pxheight: 35pxmargin: 10px}
</style>
<body>
<div class="demo">
<div class="btn">
<button class="ssize" name="" >S</button>
<button class="msize" name="" >M</button>
<button class="lsize" name="" >L</button>
</div>
</div>
</body>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
$('.ssize').click(function(){
$('.btn button').css('width','35px')
$('.btn button').css('height','35px')
})
$('.msize').click(function(){
$('.btn button').css('width','55px')
$('.btn button').css('height','55px')
})
$('.lsize').click(function(){
$('.btn button').css('width','75px')
$('.btn button').css('height','75px')
})
})
</script>
</html>
<!DOCTYPE html><html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
a{width: 100px height: 100px background-color: red transition: 1s display: block font-size: 14px}
a:hover{width: 200px height: 200px background-color: greenyellow}
</style>
</head>
<body>
<a href="###">划到我上面变大</a>
<script>
var a = document.getElementsByTagName('a')[0]
a.onclick = function () {
a.style.width = '300px'
a.style.height = '300px'
a.style.backgroundColor = 'red'
}
</script>
</body>
</html>
可以使用a标签来实现，表单元素button是不能改变高度的，但是可以改变宽度，如果都需要改变的话，只能使用a标签来模拟一个按钮，若要通过点击来实现的话，只能通过JS脚本
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）