JavaScript初學者都會問這麼一個問題：如果想要使用JavaScript操作某個元素的CSS樣式，那我該怎麼做呢？
對於元素的CSS樣式操作，其實也是屬於DOM中的內容。市面上很多課程對這一個知識點都是一筆帶過，這對初學者而言，是相當不好的。
為了幫助大家把JavaScript初學知識系統化，我在這裡把這一知識點獨立成一節，詳細給大家講解一下。
在JavaScript中，對於元素的CSS操作，我們使用的是DOM對象中的style對象來操作。
語法：
obj.style.屬性名;
說明：
obj指的是DOM對象，也就是通過document.getElementById()等獲取而來的DOM元素節點對象。
屬性名為CSS屬性名。有一點大家要非常清楚，就是這裡的屬性名使用的“駱駝峰”型的CSS屬性名。何為“駱駝峰”型呢？舉個例子，“font-size”應該寫成“fontSize”，“border-bottom-width”應該寫成“borderBottomWidth”，以此類推。
舉例：
在線測試
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script type="text/javascript">
function change() {
var e = document.getElementById("lvye");
e.style.color = "red";
e.style.border = "1px solid gray";
}
</script>
</head>
<body>
<h1 id="lvye"> 學習網</h1>
<input type="button" value="改變樣式" onclick="change()"/>
</body>
</html>
在浏覽器預覽效果如下：
分析：
當我們點擊“改變樣式”這一按鈕後，浏覽器預覽效果如下：
有人就問了，像CSS3中“-webkit-box-shadow”這種奇葩式的CSS兼容屬性名該怎麼寫呢？也很簡單，應該寫成“webkitBoxShadow”。關於CSS3的學習，請關注站長的“CSS3教程”