帮助中心

首页网页特效整站源码 PHP实例网站模版工具箱常用代码论坛游戏源码资源分享

在线即时显示CSS样式改变DIV颜色宽高度大小实时预览特

浏览：1579次- 评论：9次- 发布时间：2019-09-05

Html

Css

Js

body {
	background: #00b38a  center no-repeat;
	overflow: hidden;
	color: white;
	font-family: "Microsoft YaHei";
}

a {
	text-decoration: none;
}

#container {
	position: relative;
	width: 500px;
	height: 600px;
	background: white;
	margin: 0 auto;
}

#container .btn {
	display: block;
	height: 90px;
	width: 100%;
	background: #2D659F;
	color: white;
	font-size: 20px;
	line-height: 90px;
	text-align: center;
	font-weight: bold;
}

#container #box {
	width: 150px;
	height: 150px;
	background: #00A881;
	border: 2px solid #272822;
	position: absolute;
	top: 50%;
	left: 50%;
	margin-top: -75px;
	margin-left: -75px;
	z-index: 99999;
}

#change {
	position: absolute;
	top: 90px;
	left: 510px;
	display: block;
	width: 150px;
	height: 370px;
	background: white;
}

#change div {
	padding: 10px;
}

p {
	color: #000;
}

#change button {
	display: inline-block;
	width: 40px;
	height: 40px;
	background: #F5F6F7;
	border: 1px solid #D8D8D8;
	color: #00A881;
}

#change button#red {
	background: red;
}

#change button#yellow {
	background: yellow;
}

#change button#blue {
	background: blue;
}

window.onload = function() {
	var bt1 = document.getElementById('red');
	var bt2 = document.getElementById('yellow');
	var bt3 = document.getElementById('blue');

var box = document.getElementById('box');
	bt1.onclick = function() {
		box.style.background = "red";
	};
	bt2.onclick = function() {
		box.style.background = "yellow";
	};
	bt3.onclick = function() {
		box.style.background = "blue";
	};

var wd_size1 = document.getElementById('wd1');
	var wd_size2 = document.getElementById('wd2');
	var wd_size3 = document.getElementById('wd3');
	wd_size1.onclick = function() {
		box.style.width = "100px";
		box.style.marginLeft = "-50px";
	};
	wd_size2.onclick = function() {
		box.style.width = "200px";
		box.style.marginLeft = "-100px";
	};
	wd_size3.onclick = function() {
		box.style.width = "300px";
		box.style.marginLeft = "-150px";
	};

var hg_size1 = document.getElementById('hg1');
	var hg_size2 = document.getElementById('hg2');
	var hg_size3 = document.getElementById('hg3');
	hg_size1.onclick = function() {
		box.style.height = "100px";
		box.style.marginTop = "-50px";
	};
	hg_size2.onclick = function() {
		box.style.height = "200px";
		box.style.marginTop = "-100px";
	};
	hg_size3.onclick = function() {
		box.style.height = "300px";
		box.style.marginTop = "-150px";
	};
};

↑上面代码改变，会自动显示代码结果

jQuery调用版本：1.11.3

素材牛VIP永久特权

立即下载收藏

积分说明：注册即送10牛币，每日签到可获得5牛币，成为VIP会员可永久免牛币下载！充值积分充值会员更多说明»

代码描述：在线即时显示CSS样式改变DIV颜色宽高度大小实时预览特效 dome演示在线即时显示CSS样式

dome演示在线即时显示CSS样式

讨论这个常用代码（9）回答他人问题或分享心得会奖励牛币

js***ss

2019年09月09日

这个挺不错的，学习一下。

gh***ui

2019年09月22日

这个挺不错的，学习一下。

艺***技

2019年09月26日

挺好！

wx***52

2019年10月05日

这个挺不错的，学习一下

qq***95

2019年10月22日

呵呵看不太懂

v***神

2019年11月07日

这个挺不错的，学习一下

qq***71

2019年11月15日

这个挺不错的，学习一下

qq***43

2019年11月21日

这个挺不错的，学习一下

qq***44

2020年02月17日

学习学习

文明上网，理性发言！ 😉 阿里云幸运券，戳我领取

我的积分余额：0 已下载次数：1579

所需牛币：5 开始下载

牛币获取：签到、评论、充值 » 在线充值（10牛币=1元）

成为VIP可永久免积分下载全部常用代码 » 查看详情