<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="div1">博客園</div>
<input type="button" value="變大" onclick="big()">
<input type="button" value="變色" onclick="color()">
<script>
function big() {
var ele=document.getElementById("div1"); // 先導航到要改的標簽
ele.style.fontSize="80px"; // 用style.里的方法去改變屬性參數
}
function color() {
var ele=document.getElementById("div1"); // 同上
ele.style.color="red";
}
</script>
</body>
</html>
================================== 注: 如果是大公司共同開發代碼時,css可能是美工完成的 直接改別人的代碼方法不可取 ===================================
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.class1{
color: #48f444;
}
.big{
font-size: 90px;
color: #0000cc;
}
.small{
font-size: 30px;
color: red;
}
</style>
</head>
<body>
<div id="div1" class="class1"> 博 客 園 !!</div>
<input type="button" value="變大" onclick="change('big')"> // 指定傳的參數就是要添加的css的樣式名
<input type="button" value="變小" onclick="change('small')">
<script>
function change(css) { // 因為功能一樣 所以只用一個函數完成,使用參數
var ele=document.getElementById("div1"); // 通過ID找到標簽
ele.classList.add(css) // 在標簽的class list里用此方法添加 css
}
</script>
</body>
</html>
================================== 注:此方法是通過添加已有的未引用的樣式表到標簽中去 ==============================================
