如何動態(tài)設(shè)置CSS樣式

之前在論壇上面看到論壇后臺可以把所有頁面的標題,內(nèi)容，字體，背景，顏色等css屬性都列出來了，并且可以隨意重新設(shè)置，保存以后前臺頁面就可以根據(jù)設(shè)置動態(tài)的更新顯示了，之前就有了一點想法，做了一個demo.jsp，然后在這個頁面引入一個style.css樣式文件，并且在這個樣式文件中定義了一些屬性，然后定義了一個java類來對應(yīng)樣式文件的屬性

創(chuàng)新互聯(lián)從2013年開始，先為東寶等服務(wù)建站，東寶等地企業(yè)，進行企業(yè)商務(wù)咨詢服務(wù)。為東寶企業(yè)網(wǎng)站制作PC+手機+微官網(wǎng)三網(wǎng)同步一站式服務(wù)解決您的所有建站問題。

JS 怎么動態(tài)設(shè)置CSS3動畫的樣式

引入jquery

然后給你要設(shè)置動畫的對象增加或者刪除css3動畫的類就可以了。

如我這里用colorchange這個漸變類在css里面寫好動畫效果以后在js里面給對象添加上就可以實現(xiàn)動畫了

!DOCTYPE?html

html

head?lang="en"

meta?charset="UTF-8"

titleTest/title

style?type="text/css"

body{

padding:?20px;

background-color:#FFF;

}

.colorchange

{

animation:myfirst?5s;

-moz-animation:myfirst?5s;?/*?Firefox?*/

-webkit-animation:myfirst?5s;?/*?Safari?and?Chrome?*/

-o-animation:myfirst?5s;?/*?Opera?*/

}

@keyframes?myfirst

{

from?{background:red;}

to?{background:yellow;}

}

@-moz-keyframes?myfirst?/*?Firefox?*/

{

from?{background:red;}

to?{background:yellow;}

}

@-webkit-keyframes?myfirst?/*?Safari?and?Chrome?*/

{

from?{background:red;}

to?{background:yellow;}

}

@-o-keyframes?myfirst?/*?Opera?*/

{

from?{background:red;}

to?{background:yellow;}

}

#main{

width:100px;

height:100px;

background:red;

}

#cgbt{

width:?100px;

margin:?20px?0?0?0;

text-align:?center;

cursor:?pointer;

}

#cgbt:hover{

background-color:?#2D93CA;

}

/style

/head

body

div?id="main"

我會變么？

/div

div?id="cgbt"

點我讓上面的變顏色

/div

script?src="jquery-3.2.1.min.js"?type="application/javascript"/script

script

$(document).ready(function(){

$("#cgbt").click(function(){

$("#main").attr("class","colorchange");

});

});

/script

/body

/html

css樣式的基本規(guī)則是什么？

1、選擇器用于指定CSS樣式作用的HTML對象，花括號內(nèi)是對該對象設(shè)置的具體樣式。

2、屬性和屬性值以“鍵值對“?的形式出現(xiàn)。

3、屬性是對指定的對象設(shè)置的樣式屬性，例如字體大小、文本顏色等。

4、屬性和屬性值之間用英文“:“連接。

5、多個“鍵值對”之間用英文“;”進行區(qū)分?？梢杂枚温浜捅砀竦膶R的演示。

CSS不僅可以靜態(tài)地修飾網(wǎng)頁，還可以配合各種腳本語言動態(tài)地對網(wǎng)頁各元素進行格式化。CSS 能夠?qū)W(wǎng)頁中元素位置的排版進行像素級精確控制，支持幾乎所有的字體字號樣式，擁有對網(wǎng)頁對象和模型樣式編輯的能力。

擴展資料：

CSS作為一種定義樣式結(jié)構(gòu)如字體、顏色、位置等的語言，被用于描述網(wǎng)頁上的信息格式化和顯示的方式。CSS樣式可以直接存儲于HTML網(wǎng)頁或者單獨的樣式單文件。

無論哪一種方式，樣式單包含將樣式應(yīng)用到指定類型的元素的規(guī)則。外部使用時，樣式單規(guī)則被放置在一個帶有文件擴展名_css的外部樣式單文檔中。

樣式規(guī)則是可應(yīng)用于網(wǎng)頁中元素，如文本段落或鏈接的格式化指令。樣式規(guī)則由一個或多個樣式屬性及其值組成。內(nèi)部樣式單直接放在網(wǎng)頁中，外部樣式單保存在獨立的文檔中，網(wǎng)頁通過一個特殊標簽鏈接外部樣式單。