整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
、動畫的應用
動畫在網站設計中起著重要作用，可以為用戶提供一個更令人興奮和引人入勝的體驗。通過動畫，設計師可以將靜態頁面轉化為有生命力的動態頁面。
二、動畫技術
有幾種動畫技術可用于 CSS：
三、動畫屬性
動畫可以影響許多不同的 CSS 屬性，例如：
四、流行的 CSS 動畫庫
五、動畫案例
知名的 CSS 動畫網站：
六、結論
CSS 動畫可以為網站添加生命力并提升用戶體驗。通過利用動畫技術，設計師可以創造出動感和引人入勝的網站。
過DOM方式動態創建HTML標簽元素,并將創建的元素追加到父元素中
DOM方式動態創建頁面元素基本只需三步:
1)通過document.createElement('HTML支持的標簽名稱,比如div,input等')方法創建元素
2)設置剛剛創建標簽要顯示的文本
3)通過appendChild(剛剛創建的元素)方法追加到父元素中子元素的最后
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>動態創建頁面元素</title>
<script type="text/javascript">
//頁面加載完畢后執行
window.onload=function () {
//為按鈕注冊一個單擊事件
document.getElementById('btn').onclick=function () {
//動態創建一個li
var li=document.createElement('li');
//設置顯示的文本
li.innerHTML='深圳';
//獲取父元素
var ul=document.getElementById('ulList');
//將創建的元素追加到ul中
ul.appendChild(li);
//等同于 document.getElementById('ulList').appendChild(li);
}
}
</script>
</head>
<body>
<input type="button" id="btn" value="動態創建一個li,追加到ul中" />
<ul id="ulList">
<li>北京</li>
<li>上海</li>
<li>廣州</li>
</ul>
</body>
</html>動態創建并追加的li標簽
avaScript動態設置CSS樣式實例分析
通過使用文檔對象模型DOM，可以將HTML文件當做文檔對象，并按照文檔對象處理方法進行處理。主要處理形式包括設置HTML標記文本內容、設置元素屬性值及對Style樣式進行操作等。本文主要介紹使用文檔對象模型DOM所提供的Element、HTMLElement等實現對元素Style樣式進行快速設置。
DOM（Document Object Model）文檔對象模型是W3C提出的技術規范，該規范與瀏覽器、平臺、語言無關。HTML DOM是指適用于HTML的文檔對象模型。因此在JavaScript中我們所認識的DOM應當可以理解為HTML DOM。DOM標準相關對象關系描述如下圖所示：
DOM標準概念與關系
在DOM標準對象描述中可以看出所有的對象都繼承于Node對象，Node對象是DOM文檔對象模型的核心。在JavaScript文檔對象模型中，Document對象、Element對象等都繼承于Node對象，而HTMLDocument對象與HTMLElement對象等又分別繼承于Document對象與Element對象。
Element對象提供了HTML頁面中所有的元素方法與屬性。我們可以借助HTMLElement對象實現對HTML頁面元素進行操作與屬性值讀寫等。
HTMLElement對象繼承自Element對象，因此具有其父類的基本屬性與方法。在Element對象主要提供style屬性與setAttribute()方法實現對元素樣式屬性及屬性值進行設置。兩種方法描述如下：
1、style屬性
style屬性是HTMLElement繼承自父類Element的基本屬性之一，主要用于對HTML樣式屬性進行設置或者樣式屬性值的讀取。在進行樣式屬性值設置過程中可以分為兩種方式進行設置。第一種為設置單個特定style樣式，如設置background-color屬性值，我們可直接使用如下方法進行設置：
HTMLElement.style.property=value;第二種設置方法是同時對某個元素全部style樣式進行重新設置，這種情況下我們使用style.cssText屬性進行整體屬性設置，設置語法描述如下：
HTMLElement.style.cssText="property1:value1;...propertyN:valueN";2、setAttribute()方法設置CSS
setAttribute()方法也是Element對象的基本方法之一，主要用于設置指定元素的指定屬性值。如該屬性值存在則更新屬性值。在HTMLElement對象中我們可以直接使用setAttribute方法進行style屬性的值的設置。其基本語法描述如下：
HTMLElement.setAttribute(name,value);本例主要設置實現在鼠標經過某一個DIV時，動態改變該DIV層的style樣式屬性，主要改變屬性包括背景顏色、字體大小及光標形狀等。設計原始DIV樣式效果如下圖：
原始CSS樣式
該案例原始CSS樣式實現代碼描述如下圖所示：
原始頁面實現代碼
按照實例要求我們為div層添加鼠標over事件，并編寫事件處理函數用于響應鼠標處理，具體處理需要實現style樣式變化要求。對該div添加onmouseover事件，響應函數名稱為changeStyle()。代碼描述如下：
事件處理函數
在該事件處理函數中我們傳遞了用于標識當前元素的this參數，函數在接收到該參數后能夠直接定位與當前div，并進行下一步處理。changeStyle方法描述如下：
事件處理方法1
事件處理方法1使用style.cssText方法進行了CSS樣式的動態設置，使用setAttribure方法進行樣式設置代碼如下：
事件處理方法2
通過編寫以上代碼可以實現鼠標經過DIV時，style樣式中的背景顏色、文字大小及光標樣式的動態變化，變化之后效果描述如下圖：
動態改變樣式效果
以上給出了Element、HTMLElement及DOM基本概念說明，并對HTMLElement對象style屬性與setAttribute方法在CSS樣式改變中的應用進行了語法說明與實例分析。如需完整代碼關注并私信。
本頭條號長期關注編程資訊分享；編程課程、素材、代碼分享及編程培訓。如果您對以上方面有興趣或代碼錯誤、建議與意見，可在評論區回復。更多程序設計相關教程及實例分享，期待大家關注與閱讀！相關文章鏈接如下：
前端設計-JavaScript實現復選框的分組單選
本文由kid編程原創，歡迎關注，帶你一起長知識！
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
