js可以隨意修改css
成都創(chuàng)新互聯(lián)公司專注于企業(yè)成都營銷網站建設、網站重做改版、洛扎網站定制設計、自適應品牌網站建設、HTML5建站、成都做商城網站、集團公司官網建設、成都外貿網站建設公司、高端網站制作、響應式網頁設計等建站業(yè)務,價格優(yōu)惠性價比高,為洛扎等各大城市提供網站開發(fā)制作服務。
$("#id").css("color","red");// 單個樣式修改
$("#id").css(["color":"red","font-size":"16px"]);// 多個樣式修改
在js中修改css樣式,必須通過關鍵詞style。在編輯修改CSS直接設置樣式(內聯(lián)樣式)使用JavaScript設置元素樣式的最簡單方法是使用style屬性,在我們通過JavaScript訪問的每個HTML元素時都有一個style對象。
js是直接修改樣式。
我們通過JS修改CSS樣式有兩種方法:
一是修改某一屬性的值
比如:通過for循環(huán)建立一個6位數字構成的字符串再加上#,形成能夠作為顏色屬性的字符串(顏色有一種表達方式就是這樣。如:#324254),然后將這個值賦給body的樣式屬性background-color(JS中寫法位backgroundColor),達到我們修改樣式的目的
二是修改某一元素的class名,使其被別的樣式修飾。
比如,通過 JS,將id為“up”的元素的class名改為solid,使其被.solid樣式修飾,達到我們修改樣式的目的。
修改樣式
document.getELementById('div').style.fontSize = "20px";
修改寫好的類樣式
document.getELementById('div').className = "div";
語法:元素.style.樣式名=樣式值
注意:如果CSS的樣式名中含有-,這種名稱在JS中是不合法的,比如 background-color 。需要將這種樣式名修改為駝峰命名法:去掉-,然后將-后的第一個字母大寫,比如 backgroundColor
我們通過style屬性設置的樣式都是內聯(lián)樣式,而內聯(lián)樣式有較高的優(yōu)先級,所以通過JS修改的樣式往往會立即顯示
但是如果在樣式中寫了!important,則此時樣式會有最高的優(yōu)先級,即使通過JS也不能覆蓋該樣式,此時將會導致JS修改樣式失效
所以盡量不要為樣式添加!important
語法:元素.style.樣式名
通過style屬性設置和讀取的都是內聯(lián)樣式,無法讀取樣式表中的樣式
語法:元素.currentStyle.樣式名
如果當前元素沒有設置該樣式,則獲取它的默認值
例如: box1.currentStyle.width
這個方法是window的方法,可以直接使用需要兩個參數
第一個:要獲取樣式的元素
第二個:可以傳遞一個偽元素,一般都傳null
該方法會返回一個對象,對象中封裝了當前元素對應的樣式
可以通過對象﹒樣式名來讀取樣式
如果獲取的 樣式沒有設置 ,則會獲取到真實的值,而不是默認值
比如:沒有設置width,它不會獲取到auto,而是 一個長度
注意:通過currentStyle和getComputedstyle()讀取到的樣式都是只讀的,不能修改,如果要修改必須通過style屬性
參數:
obj 要獲取樣式的元素
name 要獲取的樣式名