作品第一课----改变DIV样式属性
2024-08-24 09:05:37
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.btn { margin: 0 auto; padding-left: 30%;}
.img { width: 200px; height: 200px; margin: 10% 30%; background-color: #000; } </style>
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
</head>
<body>
<div class="btn">
<input type="button" class="be_width" value="变宽">
<input type="button" class="be_height" value="变高">
<input type="button" class="be_color" value="变色">
<input type="button" class="be_hide" value="隐藏">
<input type="button" class="be_reset" value="重置">
</div> <div class="img"> </div>
<script>
var width = $(".img").css('width');
var height = $(".img").css('height');
var color = $(".img").css('background-color'); var new_width = parseInt(width) + 200 + 'px';
var new_height = parseInt(height) + 200 + 'px';
console.log(new_width);
$(".be_width").on("click", function() {
$(".img").css("width", new_width);
}); $(".be_height").on("click", function(){
$(".img").css("height", new_height);
}); $(".be_color").on("click", function(){
$(".img").css("background-color", "red");
}); $(".be_hide").on("click", function(){
$(".img").hide();
}); $(".be_reset").on("click", function(){
$(".img").show().css({"width": "200px", "height": "200px", "background-color": "#000"}); }); </script>
</body>
</html>
最新文章
- uboot的mkconfig分析
- python学习第五天 List和tuple类型介绍及其List切片
- 使用 phpMyAdmin无法登录mysql的问题
- Java—Integer类
- 新视野OJ 2705 [SDOI2012]Longge的问题 (数论)
- BZOJ 1004: [HNOI2008]Cards( 置换群 + burnside引理 + 背包dp + 乘法逆元 )
- java解析xml汇总(转自倾城幻影-Java解析xml汇总,链接:http://www.cnblogs.com/jiugehuanying/archive/2012/01/12/2320058.html)
- http进阶
- Ubuntu 16.04 Vim安装及配置【转】
- [Linux] Nginx响应压缩gzip
- java排序算法之希尔排序
- BZOJ1515 : [POI2006]Lis-The Postman
- 使用 MtVerify.h头文件 ,用的时候把他头文件的内容添加到项目
- SQL Support and Workarounds
- Java多线程学习之synchronized总结
- 对大表进行全表更新,导致 Replication 同步数据的过程十分缓慢
- C#基础 - C# 的 常见概念简述
- Java 获取字符串长度 length()
- C++后台研发面试总结
- 记录一次Spring Data Solr相关的错误解决