ボックススタイル

	<！DOCTYPE HTML>
	<HTML LANG = " EN">
	<ヘッド>
	<メタ文字セット=」UTF-8" >
	<タイトル>ブロックスタイリング</ TITLE>
	<スタイル>
	DIV {
	幅：150ピクセル;
	高さ：150ピクセル;
	背景色：スカイブルー。
	マージントップ：10pxの;

	}
	入力、.confirm、{選択
	表示：なし;
	}
	スパン{
	フォントサイズ：14px;
	赤色;
	}
	</スタイル>
	</ head>の
	<身体>
	<ボタン>幅を変更する</ボタン>
	<ボタン>高さを変更する</ボタン>
	<ボタン>背景色を変更する</ボタン>
	<ボタン>添加ボーダー</ボタン>
	<ボタン>調整フィレット</ボタン>
	<入力タイプ= " テキスト" 名前= "" ID = "">
	<入力タイプ= " 色" NAME = "" ID = "">
	<選択名= "" ID = "">
	<オプション値= " ベタ">固体</オプション>
	<オプション値= " 破線">破線</オプション>
	<オプション値= " 点線">点在</オプション>
	<オプション値= " ダブル">ダブル</オプション>
	</ select>の
	<入力タイプ= " 範囲" NAME = "" ID = "" 分= " 0" 最大=" 50" >
	<button class="confirm">确认</button>
	<span></span>
	<div></div>
	<script>
	// 获取DOM元素
	let btns = document.getElementsByTagName("button");
	let input = document.getElementsByTagName("input");
	let select = document.getElementsByTagName("select")[0];
	let span = document.getElementsByTagName("span")[0];
	let confirm = document.getElementsByClassName("confirm")[0];
	let div = document.getElementsByTagName("div")[0];
	// 给每一个按钮绑定事件
	btns[0].onclick = function(){
	input[0].style.display = "inline";
	input[1].style.display = "none";
	input[2].style.display = "none";
	select.style.display = "none";
	confirm.style.display = "inline";
	span.innerHTML = "输入宽度";
	}
	btns[1].onclick = function(){
	input[0].style.display = "inline";
	input[1].style.display = "none";
	input[2].style.display = "none";
	select.style.display = "none";
	confirm.style.display = "inline";
	span.innerHTML = "输入高度";
	}
	btns[2].onclick = function(){
	input[0].style.display = "none";
	input[1].style.display = "inline";
	input[2].style.display = "none";
	select.style.display = "none";
	confirm.style.display = "inline";
	span.innerHTML = "选择颜色";
	}
	btns[3].onclick = function(){
	input[0].style.display = "inline";
	input[1].style.display = "inline";
	select.style.display = "inline";
	confirm.style.display = "inline";
	input[2].style.display = "none";
	span.innerHTML = "设置border的样式";
	}
	btns[4].onclick = function(){
	input[0].style.display = "none";
	input[1].style.display = "none";
	select.style.display = "none";
	confirm.style.display = "inline";
	input[2].style.display = "inline";
	span.innerHTML = "设置圆角";
	}
	// 改变宽度
	let changeWidth = function(){
	if(span.innerHTML === "输入宽度" \|\| span.innerHTML === "输入的宽度不正确，请重新输入")
	{
	let setWidth = input[0].value;
	if(setWidth <= 0 \|\| setWidth === "")
	{
	span.innerHTML = "输入的宽度不正确，请重新输入";
	}
	else{
	div.style.width = setWidth + "px";
	span.innerHTML = "输入宽度";
	}
	}
	}
	// 改变高度
	let changeHeight = function(){
	if(span.innerHTML === "输入高度" \|\| span.innerHTML === "输入的高度不正确，请重新输入")
	{
	let setHeight = input[0].value;
	if(setHeight <= 0 \|\| setHeight === "")
	{
	span.innerHTML = "输入的高度不正确，请重新输入";
	}
	else{
	div.style.height = setHeight + "px";
	span.innerHTML = "输入高度";
	}
	}
	}
	// 改变颜色
	let changeColor = function(){
	if(span.innerHTML === "选择颜色")
	{
	let setColor = input[1].value;
	div.style.backgroundColor = setColor;
	}
	}
	// 设置border样式
	let changeBorder = function(){
	if(span.innerHTML === "设置border的样式" \|\| span.innerHTML === "border宽度输入有误，请重新输入")
	{
	let setBorderWidth = input[0].value;
	let setColor = input[1].value;
	let setStyle = select.value;
	if(setBorderWidth <= 0 \|\| setBorderWidth === "")
	{
	span.innerHTML = "border宽度输入有误，请重新输入";
	}
	else{
	div.style.borderWidth = setBorderWidth + "px";
	div.style.borderColor = setColor;
	div.style.borderStyle = setStyle;
	span.innerHTML = "设置border的样式";
	}
	}
	}
	// 设置圆角
	let changeRadius = function(){
	if(span.innerHTML === "设置圆角")
	{
	let radius = input[2].value;
	div.style.borderRadius = radius + "%";
	}
	}
	// 给confirm按钮绑定多个事件
	confirm.addEventListener("click",changeWidth,false);
	confirm.addEventListener("click",changeHeight,false);
	confirm.addEventListener("click",changeColor,false);
	confirm.addEventListener("click",changeBorder,false);
	confirm.addEventListener("click",changeRadius,false);
	</script>
	</body>
	</html>

おすすめ