在網頁制作中，我們常常需要通過添加樣式來美化頁面，使其更加美觀和易于閱讀。而javascript作為一種常用的腳本語言，也可以用來添加樣式。本文將詳細介紹javascript添加樣式的方法及示例應用。 一、使用javascript添加樣式 javascript可以通過修改元素的style屬性來實現添加樣式的效果。下面是一個簡單的例子，通過javascript添加紅色文字樣式：

//獲取對象
var txt = document.getElementById("text");
//修改樣式
txt.style.color = "red";

二、修改元素樣式 通過修改元素樣式，我們可以實現各種各樣的效果，例如改變文字顏色、字體、大小、背景顏色等等。 修改文字顏色：

//獲取對象
var txt = document.getElementById("text");
//修改樣式
txt.style.color = "red";

修改文字大小：

//獲取對象
var txt = document.getElementById("text");
//修改樣式
txt.style.fontSize = "20px";

修改文字字體：

//獲取對象
var txt = document.getElementById("text");
//修改樣式
txt.style.fontFamily = "Arial";

修改背景顏色：

//獲取對象
var txt = document.getElementById("text");
//修改樣式
txt.style.backgroundColor = "#eee";

三、應用示例 下面是一些常見的應用示例，供大家參考。 1. 動態改變圖片大小

//獲取對象
var img = document.getElementById("img");
//定義變量
var imgWidth = 100;
var imgHeight = 100;
//動態修改樣式
img.style.width = imgWidth + "px";
img.style.height = imgHeight + "px";

2. 鼠標移入移出改變背景顏色

//獲取對象
var box = document.getElementById("box");
//添加事件
box.onmouseover = function(){
box.style.backgroundColor = "#ccc";
}
box.onmouseout = function(){
box.style.backgroundColor = "#fff";
}

3. 點擊按鈕隱藏/顯示元素

//獲取對象
var btn = document.getElementById("btn");
var box = document.getElementById("box");
//添加事件
btn.onclick = function(){
if(box.style.display == "none"){
box.style.display = "block";
}else{
box.style.display = "none";
}
}

四、總結 本文介紹了javascript添加樣式的方法及應用示例，從中我們可以看到，javascript添加樣式可以實現各種各樣的效果，而且非常靈活簡便，也更加符合網頁開發的實際需求。希望本文能對大家有所幫助，謝謝收看！