<!DOCTYPE html>
<html>
<head>
<title>10.11work</title>
<meta charset="utf-8">
<style type="text/css">
button{
width: 21px;
height: 21px;
}
input{
height: 21px;
}
</style>
<script type="text/javascript" src="jquery-2.1.1.min.js"></script>
<script type="text/javascript">
function changeSize(){
var x = document.getElementById("size").value;
console.log(x);
document.getElementById("word").style.fontSize = x + "px";
}
function changeColor(){
var x = document.getElementById("color").value;
console.log(x);
document.getElementById("word").style.color = x ;
}
function size(){
var x = $("#inp1").val();
console.log(x);
$("#word").css("font-size",x+"px");
}
function color(){
var x = $("#inp2").val();
console.log(x);
$("#word").css("color",x);
}
</script>
</head>
<body>
<input type="text" name="change" placeholder="字体大小" id="inp1" />
<button onclick="size();"></button>
<input type="text" name="change" placeholder="字体颜色" id="inp2" />
<button onclick="color();"></button>
<select id="size" onchange = "changeSize();">
<option value="" style="display: none;">选择字体大小</option>
<option value="20">20px</option>
<option value="50">50px</option>
<option value="70">70px</option>
</select>
<select id="color" onchange = "changeColor();">
<option value="" style="display: none;">选择字体颜色</option>
<option value="red">red</option>
<option value="green">green</option>
<option value="pink">pink</option>s
</select>
<div id="word">我可以变大变小变色</div>
<script type="text/javascript">
$(document).ready(function(){
document.getElementById("word").style.fontSize = 40+"px";
document.getElementById("word").style.fontSize = document.getElementById("size").value + "px";
document.getElementById("word").style.color = document.getElementById("color").value;
})
</script>
</body>
</html>
3375
06-07
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
