JS修改css樣式
1.點擊按鈕改變寬度
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
#first{
width: 200px;
height: 200px;
background-color: red;
}
</style>
</head>
<body>
<input type="" name="" class="uName" readonly="true">
<div id="first"></div>
<input type="button" name="" value="點我" >
</body>
<script type="text/javascript">
var first = document.getElementById("first");
first.style.backgroundColor = "blue";
first.style.border = "5px solid green";
document.getElementById("first").style.margin = "0px auto";
first.innerHTML = "<p>福</p>";
first.innerText = "<p>福</p>";
console.log(first.innerHTML);
console.log(first.innerText);
var uNames = document.getElementsByClassName("uName");
uNames[0].value = "沒點擊前";
console.log(uNames[0].value);
var button = document.getElementsByTagName("input")[1];
var a = 1;
button.onclick = function(){
console.log(123);
a++;
first.style.transition = "1s";
first.style.width = a * 10 + "px";
first.style.height = "100px";
uNames[0].value = "第"+(a-1)+"次點擊----"+"寬"+ a*10+"px"
}
</script>
</html>
2.簡單加減計算
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
#num{
width: 50px;
text-align: center;
}
</style>
</head>
<body>
<script type="text/javascript">a();</script>
<input type="button" value="-" onclick="sck()">
<input type="text" value="0" id = "num" onblur="validate(this.value)">
<input type="button" value="+" onclick="sck2()">
</body>
<script type="text/javascript">
function validate(hh){
var reg = /^\d+$/;
if (!reg.test(hh)) {
alert("請輸入數字");
}
}
function sck(){
var num2 = document.getElementById("num").value;
console.log(123);
var b = parseInt(num2);
b--;
if (b < 0) {
b = 0;
}
document.getElementById("num").value = b;
}
function sck2(){
var num2 = document.getElementById("num").value;
var b = parseInt(num2);
b++;
console.log(123);
document.getElementById("num").value = b;
}
</script>
</html>
2.簡單計算機
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
#num{
width: 50px;
text-align: center;
}
</style>
</head>
<body>
<script type="text/javascript">a();</script>
<input type="button" value="-" onclick="sck()">
<input type="text" value="0" id = "num" onblur="validate(this.value)">
<input type="button" value="+" onclick="sck2()">
</body>
<script type="text/javascript">
function validate(hh){
var reg = /^\d+$/;
if (!reg.test(hh)) {
alert("請輸入數字");
}
}
function sck(){
var num2 = document.getElementById("num").value;
console.log(123);
var b = parseInt(num2);
b--;
if (b < 0) {
b = 0;
}
document.getElementById("num").value = b;
}
function sck2(){
var num2 = document.getElementById("num").value;
var b = parseInt(num2);
b++;
console.log(123);
document.getElementById("num").value = b;
}
</script>
</html>
