在javascript中,可以使用style物件屬性來設定漸變色,語法格式為「元素物件.style.backgroundImage='linear-gradient(角度,顏色,顏色)'」;Style物件代表一個單獨的樣式聲明。
本教學操作環境:windows7系統、javascript1.8.5版、Dell G3電腦。
其實漸層的實作歸根究底都是css(樣式)來控制
所有程式碼直接在JS裡面寫:
var test = document.getelementById(''test); test .style.backgroundImage='linear-gradient(120deg, #155799, #159957)';
PS:這兒的backgroundImage的'i'一定要大寫,並且一定要這麼寫,不能寫成和css裡面的background-image一樣,JS不識別的。
擴充資料:
在css裡面寫好之後,透過js為element加入class來新增樣式:
在樣式表定義好樣式
css:
.jianbian{ background-image: linear-gradient(120deg, #155799, #159957); }
然後透過js為元素添加class
js:
var test = document.getelementById(''test); test.className = 'jianbian' ;
大概就這樣了,不過你還需要考慮一下不同瀏覽器的兼容性,關於漸變的寫法。
-webket-/-moz-之類的
【推薦學習:javascript高階教學】
以上是javascript怎麼設定漸變色的詳細內容。更多資訊請關注PHP中文網其他相關文章!